主题

前言

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 以进行主题设置

使用 Create React App 进行主题设置

关键点是你不想 eject,但你想自定义样式 🤔

这是一个单向操作。一旦你 eject,你就无法返回!

不要弹出你的 Create React App

移除现有的样式

首先,请移除 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

此文件基本上已经准备好了,但是你需要在它的底部更改一些细节

最后但并非最不重要的一点:导入主 LESS 文件

你需要在你的入口文件中导入 semantic.less 文件。

现在它可以运行了!

现在你可以去例如 src/semantic-ui/site/globals/site.variables 并添加

这将改变你的主色和 <body> 的背景色 🚀

由以下提供技术支持: Vercel.