Semantic UI React 没有自己的样式系统,完全依赖于 Semantic UI 的主题。它非常强大,你不需要了解 LESS 或 CSS,只需更新变量的值或使用预定义主题的样式即可。
事实上,你所知道的关于 Semantic UI 的主题和样式知识完全适用于 Semantic UI React。
了解主题的更多信息创建主题Semantic UI 提供了自己的构建系统,使用 Gulp 生成预处理的 CSS 文件。
在所有情况下,我们建议使用 LESS 包并将它调整到你的构建系统中,使用 Webpack。LESS 包也不依赖于 Gulp 和其他杂项。但是,此包对 Webpack 不友好,需要额外的配置。
Semantic UI LESS配置 Webpack 以进行主题设置关键点是你不想 eject
,但你想自定义样式 🤔
不要弹出你的 Create React App这是一个单向操作。一旦你
eject
,你就无法返回!
首先,请移除 semantic-ui
& semantic-ui-css
包或从 CDN 包含的样式的现有引用,以避免样式重复。
Create React App 不开箱即用地支持 LESS;我们建议使用 @craco/craco
来添加它的支持并避免 eject
。你需要安装所需的包
然后更新你的 package.json
并创建 craco.config.js
我们制作了一个特殊的 CLI 工具,它将复制包含自定义框架的文件。
node_modules/semantic-ui-less/_site
文件夹复制到 src/semantic-ui/site
node_modules/semantic-ui-less/theme.config.example
复制到 src/semantic-ui/theme.config
theme.config
此文件基本上已经准备好了,但是你需要在它的底部更改一些细节
你需要在你的入口文件中导入 semantic.less
文件。
现在你可以去例如 src/semantic-ui/site/globals/site.variables
并添加
这将改变你的主色和 <body>
的背景色 🚀