我是 Semantic UI 的忠实粉丝，更喜欢 Semantic UI React。除了它们是优秀的库之外，它们的文档也很棒。
但是，为其组件编写和维护主题可能很麻烦。编写、构建和维护多个主题变得更加困难。
所以问题是：如何使用官方语义 UI 文档编写、构建和维护多个语义 UI 主题并查看它们的状态？
用于多个语义 UI 主题的语义 UI 主题构建器，支持 Font Awesome 类名和原始语义 UI React 文档演示
IT技术
javascript
reactjs
themes
semantic-ui
semantic-ui-react
2021-05-07 19:35:42
1个回答
在使用 Semantic UI 多年并最终开始编写合适的主题构建器之后，我想出了这个问题的解决方案here。
该 repo 是Semantic UI React的克隆，在根目录下有一个主题目录。
构建的主题的源代码存在于themes/src/themes/. 在此存储库中包含的示例中，您将找到一个父主题和两个子主题。
- parent-theme：可以定义通用覆盖的父主题，它使用子主题的变量
- child-theme-light：一个子主题，其中定义了浅色主题的颜色变量，这些变量被父主题中的变量消耗和覆盖
- child-theme-dark：一个子主题，其中定义了深色主题的颜色变量，这些变量被父主题中的变量和覆盖所消耗
我这样写是为了能够创建具有共同特征的嵌套主题，例如同一应用程序的浅色和深色主题，其中颜色变量在子主题中定义，覆盖在父主题中定义，使用颜色变量。
我还添加了使用 Font Awesome 本机类的功能，以便您可以编写
<Icon className='fas fa-check'>并呈现检查图标。