reactjs - 语义 UI 不应用 theme.config 中指定的主题

Question

我想实现什么目标？

我想在我的 App.js 文件中添加一个按钮。它应该是我在 theme.config 文件中指定的主题按钮。

首先想说，我已经从堆栈溢出中读到了这个问题:Semantic UI - Change Theme

我已经尝试了答案中的步骤，但这些对我没有帮助。

我已经阅读了文档: https://semantic-ui.com/usage/theming.html

据我了解，我需要更改 theme.config 文件中指定的值。该文件位于

projectFolder/semantic/src/theme.config

在theme.config文件中，有一个全局变量@site。我将其更改为“github”，运行了 gulp 构建(如问题开头提供的 SO 答案中所写)，然后重新加载开发服务器。但我仍然看到默认按钮。

/* Global */
@site        : 'github';
@reset       : 'default';

我还将按钮变量的值更改为“github”。但这也不起作用。

/* Elements */
@button      : 'github';

App.js 文件

class App extends Component {
  render() {
    return (
      <div className="App">
        <Button>Click here</Button>
      </div>
    );
  }
}

在我的 index.js 文件中，我还导入了语义-ui-css。还有其他东西要导入吗？

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import 'semantic-ui-css/semantic.min.css';

ReactDOM.render(<App />, document.getElementById('root'));

Answer 1

semantic-ui-css npm 库仅提供默认的 CSS 主题。 ^[1]

运行后gulp build ，需要导入dist中的css文件文件夹而不是 semantic-ui-css 中的文件夹。此时，semantic-ui-css不需要安装在项目中，因为您有 semantic-ui包含主题 ^{[2] 的库}.

import '<install-folder>/dist/semantic.css'

请注意 <install-folder>是相对于项目文件夹的文件夹路径。