时间戳

首页 > 解决方案 > 使用 css var 在运行时应用主题更改机制

javascript - 使用 css var 在运行时应用主题更改机制

问题描述

我想使用 css var() 在运行时更改我网站上的主题。每次用户选择一个主题时，我都会将对应的文件导入页面。但是一旦我导入一个已经导入的 css 文件，页面上的样式就不会更新。我试图通过从标签中删除以前的 css 主题文件来解决它，但它并没有作为带有h​​ref属性的标签出现，而是作为一个无法查询和删除它的标签。

例如：

主.css：

.header {
   background: var(--primary-color);
}

ThemeA.css

:root {
--primary-color: red;
}

ThemeB.css

:root {
--primary-color: blue;
}

有什么方法可以解决它，还是我必须寻求替代解决方案？如果是这样，哪种解决方案最合适？

编辑

我在反应组件中进行导入。这是我如何做到这一点的精髓：

export const MyComponent = ({theme) => {
   import(`../styles/${theme}.css`);
   /* rest of the code */
})

标签： javascripthtmlcsssassstyles

解决方案

推荐阅读