Семантический интерфейс не применяет тему, указанную в theme.config - PullRequest
0 голосов
/ 23 декабря 2018

Чего я хочу достичь?

Я хочу добавить кнопку в мой файл App.js.Это должна быть кнопка из темы, которую я указал в файле theme.config.

Сначала хочу сказать, что я уже прочитал этот вопрос из переполнения стека: Семантический интерфейс -Изменить тему Я попробовал шаги из ответа, но они мне не помогли.

И я прочитал документацию: https://semantic -ui.com / использовании / theming.html

Насколько я понимаю, мне нужно изменить значение, указанное в файле theme.config.Этот файл находится в

projectFolder / semantic / src / theme.config

В файле theme.config есть эта глобальная переменная @site.Я изменил это на 'github', запустил сборку gulp (как написано в SO-ответе, который приведен в начале вопроса) и перезагрузил сервер dev.Но я все еще вижу кнопку по умолчанию.

/* 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 файле I 'мы также импортировали semantic-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'));

1 Ответ

0 голосов
/ 23 декабря 2018

semantic-ui-css Библиотека npm предоставляет только CSS-тему по умолчанию. [1]

После запуска gulp build необходимо импортировать файл css в папку dist, а не файл из semantic-ui-css.На этом этапе semantic-ui-css не требуется устанавливать в проекте, поскольку у вас есть библиотека semantic-ui, которая включает темы [2] .

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

Обратите внимание, что <install-folder> - это путь к папке проекта.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...