Javascript 在react中执行数据库驱动样式的最佳方法

这是一个有点主观的问题，但我希望这样能有所帮助

我正在制作一个ReactJS应用程序，我需要根据用户在数据库中的设置自定义样式的某些部分（主要是配色方案）。调色板分布在很多样式表上，因此我希望避免在

render（）

方法中手动设置所有这些颜色

一种选择是在每次请求时在服务器端呈现完整的css文件。像SASS这样的东西能实时做到这一点吗？我知道大多数预处理器都是为编译时使用而设计的

另一种选择是在JavaScript模块中嵌入样式，例如。每个组件“样式表”实际上可以成为一个函数，接受一些首选项并返回样式。这种策略有一些缺点（如上所述），另外还有额外的不便，即必须向每个组件提供“样式设置”支持，以便它知道如何请求其样式

或者，我可以只使用一个全局或页面范围的样式表，因此我必须处理较少的道具，但我喜欢每个组件的模块化，以获得自己的样式

---

我还有其他选择吗？有没有做这类事情的最佳实践？

我不确定这是否是最好的方法，但我使用主题提供者完成了类似的事情

class ThemeProvider extends React.Component {
  componentDidMount() {
    // fetch required data if you don't already have it

    // create a <style> node
    this.styleTag = document.createElement('style')
    this.styleTag.type = 'text/css'

    document.head.appendChild(this.styleTag)
  }

  /* update the styles if the data source has changed */
  componentDidUpdate ({ styles: prevStyles }, prevState) {
    const { styles: currentStyles } = this.props

    if (!isEqual(currentStyles, prevStyles)) {
      // generate the css ex
      const css = `
        .some_selector {
          color: ${currentStyles.color}
        }
      `

      // update the <style> node
      this.styleTag.textContent = css
    }
  }

  render() {
    const { children } = this.props 
    return children
  }
}

class ThemeProvider扩展React.Component{
componentDidMount（）{
//如果尚未获取所需数据，请获取该数据
//创建一个节点
this.styleTag=document.createElement（'style'））
this.styleTag.type='text/css'
document.head.appendChild（this.styleTag）
}
/*如果数据源已更改，请更新样式*/
componentDidUpdate（{styles:prevStyles}，prevState）{
const{styles:currentStyles}=this.props
如果（！isEqual（currentStyles，prevStyles））{
//生成cssex
常量css=`
.一些{
颜色：${currentStyles.color}
}
`
//更新节点
this.styleTag.textContent=css
}
}
render（）{
const{children}=this.props
返回儿童
}
}

你会像这样使用它

<ThemeProvider>
  <RootComponent/>
</ThemeProvider>

专业人士

• 从一个位置全局应用CSS
• 在和解方面相当便宜

缺点

• 有一点“魔力”（即这些风格来自哪里？）
• 在应用样式之前（即渲染之后）安装组件。。。这意味着第一次加载中可能会有样式“flash”
• 有点破坏性-

  。一些选择器{color:…}

  会覆盖

  悬停

  ，等等效果。。。不过，没有什么是不容易修复的

---

听起来您可能打算或已经在您的组件中使用内联样式。即使React社区的vox populi对此表示不满，我自己也会不时使用内联样式。有时候，内联样式实际上是React问题最优雅的解决方案，但是，在这种情况下，我建议您坚持使用类名，这样您就可以将颜色的应用留给样式表了。您仍然希望使用CSS预处理器，例如或根据用户的设置应用不同的颜色主题，这就是我目前在项目中所做的。因此，您可以将诸如：color primary、color secondary、color accent之类的类应用于DOM内容，这些类将通过用户数据设置它们的颜色。

事实证明，我想做的大部分事情都非常容易。作为奖励，它内置了对全局主题的支持，所以我不必在我的组件道具中考虑主题设置