css - 用户输入的实时配色方案更改

Question

我设计了一个站点，以便更改两种用户输入的颜色应该会更改整个站点的配色方案。

完成此任务的最佳方法是什么。我知道我必须将元素保存在数据库中并在每次用户登录时提取，以便在每次登录时实现配色方案。

但目前我更担心用户更改 html 颜色值后会立即发生实时变化。

我知道有一个选项可以将 CSS 类添加到每个会更改的组件，例如 ... .primaryColor 和 .secondaryColor。然后更改该类的所有元素。 React 或其他 CSS/Javascript 解决方案是否有更好的方法？

另一个复杂的问题是，当用户加载其他尚未呈现的组件时，更改仍然有效。

Answer 1

一种可能的解决方案是使用 <style>元素加上 dangerouslySetInnerHTML ， 像这样。 (注意 CSS 周围的反引号 ` - 它是一个内插字符串文字。)

const Theme = props => {
  <style dangerouslySetInnerHTML={{__html: `
    .styled { color: ${props.userColor} }
    `}} 
  />
}

然后使用主题的组件将简单地是 <div className="styled" />

我想到了这个解决方案 here .

如果您使用此方法，请务必小心，因为您使用的是经过清理的变量来创建您的 CSS 主题。否则，注入(inject)攻击存在潜在问题。