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';

我也将button变量的值更改为'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中的css文件。此时，semantic-ui-css不需要安装在项目中，因为您有semantic-ui库，其中包含主题^[2]。

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

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

语义用户界面未应用theme.config

1 个答案: