语义 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', 运行 a gulp build （如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>是相对于项目文件夹的文件夹路径

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

Semantic UI doesn't apply the theme specified in theme.config

reactjs

semantic-ui

semantic-ui-react