用React动态插入SCSS类

Question

关于使用React动态插入SASS类的最佳实践的基本问题。

我有一个带有两个道具的React组件：componentId和color。组件呈现为列表。每次渲染它们时，我都希望它们将组件的CSS背景颜色设置为this.props.backgroundColor。

我知道我可以使用内联样式来执行此操作，但是由于难以维护，因此人们通常对此表示反对。我目前有一个带有多个类的SCSS文件。

如何动态地将SCSS类附加为类名称this.props.componentId和颜色this.props.backgroundColor？

例如，如果组件的this.props为

componentId: list-item-123456789
color: #00FFFF

如何从react组件中将以下SCSS类附加到我的style.scss文件中？

.list-item-123456789 {
    background-color: #00FFFF;
}

这是样式组件的工作吗？内联样式可能是这项工作的最佳实践吗？仅从我一直阅读的内容来看，这样做对我来说很棘手，但我不确定如何解决上述问题。

Answer 1

您已经猜到，这将是样式化组件或内联样式的工作。当您的React应用程序编译时，所有这些SASS文件都通过Webpack转换为标准CSS（我想）。因此，一旦您的应用程序被捆绑和部署，您的SASS文件就变得多余了。

Answer 2

内联样式不同于仅在元素上设置类的方法，如果要实际手动创建所有这些样式类，则可以这样做。

就做

<li className={{this.props.componentId}}>Some Item </li>

确保您的SASS类是该组件的全局类或范围。