【发布时间】：2020-06-06 03:20:05
【问题描述】：
我正在寻找最佳实践，让开发人员能够对我的 React 共享组件中存在的元素进行样式设置。
例如，我有一个下拉菜单，我希望开发人员能够选择一个预定义的主题，然后可以为我的下拉组件中存在的列表元素选择突出显示颜色、字体大小、字体系列.我为每个默认主题创建了枚举，并提供了一种允许开发人员定义主题对象并将 css 添加到位于该枚举后面的属性的方法。然后我将样式注入到功能组件中。
但是，我很快意识到，如果我不为开发人员提供一种方法来调整主题界面范围之外的元素的方面，例如字体粗细，开发人员将无法进行调整。设置它的样式，我必须进去添加它并测试它是否适用于所有其他样式组合，这变得乏味且开销很大。
我想知道是否有一个实现，我为组件中的元素提供参考，并提供开放式CSSProperties 样式道具，让开发人员可以根据自己的内心内容设置样式？是否有最佳实践来做到这一点？如果可能，请提供一个简短的例子？
需要注意的是，诸如 Next JS 之类的框架将对 css 模块进行编码，并且由于 css 元素编码或附加的 id 使得用户难以提供将操纵组件的 css。这就是为什么我认为 refs 方法可能有效的原因。
【问题讨论】：
标签： javascript css reactjs sass next.js