Semantic-UI React：如何在 create-react-app 项目中使用较少的变量来设置主题

Question

我在我的 create-react-app 项目中使用 Semantic-UI。我正在使用自定义主题使用 ThemeProvider 修改单个组件，效果很好。但是我想弄清楚如何将 less 变量修改为 described in the semantic-ui documentation

react semantic-ui 文档对此没有提供太多信息。有什么建议吗？

我的 Index.js 大致是这样的：

import 'semantic-ui-css/semantic.min.css'
import { ThemeProvider } from 'styled-components'
import mainTheme from './themes/mainTheme'


ReactDOM.render(
  <ThemeProvider theme={mainTheme}>
    <App />
  </ThemeProvider>
  document.getElementById('root')
)

编辑：具体说明我要实现的目标，我想更改使用的主要字体。

Answer 1

查看 docs，您基本上可以在 theme 文件夹中有一个 globals 文件夹，其中包含两个可选文件：site.variables 和 site.overrides。我假设您可以覆盖 site.overrides 中的 @font 变量。

您可以查看 site.variables here 的示例。

Answer 2

简短的回答...我认为你做不到。

这里直接导入.css文件，使用的是编译后的样式表，变量少对你没有好处。我看到了解决此问题的两种方法之一。

1) 创建您自己的 less 样式表，然后导入该库的 less 文件。我不推荐这个选项，因为你还没有使用 less。

2) 在您自己的样式表中自行覆盖字体。由于您使用的是样式化组件，因此可以使用 injectGlobal 选项来实现此目的。

Answer 3

编辑：您可以为此使用 semantic-ui 包。 https://react.semantic-ui.com/usage#semantic-ui-package

Install the full Semantic UI package. Semantic UI includes Gulp build tools so your project can preserve its own theme changes, allowing you to customise the style variables.

Detailed documentation on theming in Semantic UI is provided here.
$ npm install semantic-ui --save-dev
After building the project with Gulp, you'll need to include the minified CSS file in your index.js file:
import '../semantic/dist/semantic.min.css';

其他方法：一种方法是将主题配置作为项目的一部分，并且可能在分叉的 git 存储库中具有语义 -ui 并将此配置用于运行自定义 build命令类似于 https://semantic-ui.com/introduction/build-tools.html.

工作流程是这样的。运行 gulp build-new（在分叉的语义-ui 回购中）接受 theme.config 路径的参数（指向你的 React 项目主题路径）并放入分叉的回购然后运行s gulp build 生成主题 css。您甚至可以完成将已编译的 css 替换为您的 React 项目的任务。

Answer 4

查看 the official boilerplate, it contains the preconfigured environment with Webpack3 and examples of theming that follow theming guide。

Answer 5

我遇到了 this tutorial to use a custom theme using sematnic UI and CRA，它完美地概述了这个过程。这是一个漫长的过程，所以我只留下 link.

Here is the link to the Github repo of the tutorial.

Semantic-UI React：如何在 create-react-app 项目中使用较少的变量来设置主题

Semantic-UI React: How to theme using less variables in a create-react-app project

reactjs

create-react-app

semantic-ui-react