Question

我在create-react-app项目中使用Semantic-UI。我使用自定义主题使用ThemeProvider修改单个组件，这是很好的。但是，我试图弄清楚如何将较少的变量修改为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您的globals文件夹中基本上有一个theme文件夹，其中包含两个可选文件：site.variables和site.overrides。我假设您可以覆盖所述@font中的site.overrides变量。

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

Answer 2

答案很简短......我认为你不能。

由于您直接在此处导入.css文件，因此您使用的是已编译的样式表，因此较少的变量对您没有好处。我看到了解决这个问题的两种方法之一。

1）创建自己的较少样式表，然后导入这些库＆＃39;少文件。我不推荐这个选项，因为你还没有使用更少。

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

Answer 3

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

安装完整的语义UI包。语义UI包括Gulp构建   工具，以便您的项目可以保留自己的主题更改，允许您   自定义样式变量。

此处提供了有关语义UI主题的详细文档。
$ npm install semantic-ui --save-dev
在与Gulp建立项目后，您需要包含该项目 index.js文件中的缩小CSS文件：
import '../semantic/dist/semantic.min.css';

其他方法：一种方法是将主题配置作为项目的一部分，并在分叉的git repo中使用semantic-ui，并使用此配置运行类似于https://semantic-ui.com/introduction/build-tools.html的自定义构建命令。

工作流程就像这样。运行gulp build-new（在forked semantic-ui repo中），它接受theme.config路径的参数（指向您的反应项目主题路径）并放入分叉仓库，然后运行gulp build生成主题css。你可以让任务甚至将已编译的css替换为你的反应项目。

Answer 4

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

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

Answer 5

签出the official boilerplate，它包含带有Webpack3的预配置环境以及theming guide后的主题示例。

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

5 个答案: