javascript - 使用 React 动态插入 SCSS 类

Question

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

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

我知道我可以使用内联样式来做到这一点，但由于难以维护，通常不赞成这样做。我目前有一个包含许多类的 SCSS 文件。

我如何动态地附加一个带有类名 this.props.componentId 和颜色 this.props.backgroundColor 的 SCSS 类？

例如，如果组件有 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 文件就是多余的。