Svelte中store状态更新后样式没生效是怎么回事？

Mr-瑄旗提问于 2026-02-27 17:23:18 阅读 16

框架

我在Svelte里用writable store管理一个主题颜色，修改store值后DOM内容变了，但CSS变量没更新，样式还是旧的。是不是我写法有问题？

我试过在组件里直接读取store值，也用了$:自动订阅，但CSS里的var()就是不刷新。下面是我用的CSS：

:root {
  --theme-color: #333;
}

.theme-text {
  color: var(--theme-color);
}

难道不能用CSS变量配合store动态切换主题吗？

Svelte

我来解答赞 5 收藏

反馈

1 条解答

欧阳景川 Lv1

检查一下你是不是把CSS变量写在了全局:root里，Svelte组件的:global()作用域可能没生效，正确的做法是把CSS变量绑定到具体DOM元素的style属性上，比如：







  主题文字

或者用:global(:root)配合$: document.documentElement.style.setProperty('--theme-color', $themeColor)显式更新——但前者更简单可靠。

2026-02-27 18:03