Semantic-UI React: как создать тему с использованием меньшего количества переменных в проекте приложения create-react-app

Я использую Semantic-UI в своем проекте приложения create-response-app. Я использую настраиваемую тему для изменения отдельных компонентов с помощью ThemeProvider, которая работает хорошо. Однако я пытаюсь понять, как изменить переменные less как , описанные в документации по семантическому пользовательскому интерфейсу

Документация response 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')
)

Изменить: чтобы быть конкретным в том, чего я пытаюсь достичь, я хочу изменить основной используемый шрифт.


reactjs create-react-app semantic-ui-react
person Zumo    schedule 17.01.2018    source источник

Ответы (5)


arrow_upward
1
arrow_downward

Просматривая документы, вы могли бы иметь папку globals в вашем theme папка, содержащая два необязательных файла: site.variables и site.overrides. Я предполагаю, что вы можете переопределить переменную @font в указанном site.overrides.

Вы можете увидеть пример site.variables здесь.

person Daniel Andrei    schedule 22.01.2018
comment
Спасибо за ответ, у меня есть часть, что я могу использовать файл site.overrides для изменения site.variables. Я просто не понимаю, как его настроить, поэтому он берет мой собственный файл site.overrides при создании ... - person Zumo; 22.01.2018
comment
Я считаю, что вам нужно изменить переменную сайта из вашего theme.config, чтобы она соответствовала желаемой теме - person Daniel Andrei; 22.01.2018
comment
Я имел в виду, допустим, я создаю файл theme.config или site.variables, где я могу сказать своей сборке, что нужно использовать этот настраиваемый файл? Вы можете показать пример файла, в котором это указано? (это в index.js, добавленном в код, который я вставил выше, или где-то еще?) - person Zumo; 23.01.2018

arrow_upward
1
arrow_downward

Короткий ответ ... Я не думаю, что ты сможешь.

Поскольку вы напрямую импортируете файл .css сюда, вы используете скомпилированную таблицу стилей, поэтому меньшее количество переменных не принесет вам пользы. Я вижу один из двух способов решить эту проблему.

1) Создайте свою собственную таблицу стилей less, которая затем импортирует файлы less из этих библиотек. Я не рекомендую этот вариант, поскольку вы еще не используете меньше.

2) Замените шрифт самостоятельно в своей таблице стилей. Поскольку вы используете стилизованные компоненты, вы можете использовать параметр injectGlobal для достижения это.

person jerelmiller    schedule 29.01.2018

arrow_upward
1
arrow_downward

РЕДАКТИРОВАТЬ: для этого вы можете использовать пакет semantic-ui. https://react.semantic-ui.com/usage#semantic-ui-package

Установите полный пакет Semantic UI. Семантический пользовательский интерфейс включает инструменты сборки Gulp, поэтому ваш проект может сохранять собственные изменения темы, что позволяет настраивать переменные стиля.

Подробная документация по темам в семантическом пользовательском интерфейсе представлена ​​здесь.

$ npm install semantic-ui --save-dev

После сборки проекта с помощью Gulp вам необходимо включить минифицированный файл CSS в ваш файл index.js:

import '../semantic/dist/semantic.min.css';

Другие подходы: один из способов - иметь конфигурацию темы как часть вашего проекта и иметь semantic-ui, вероятно, в разветвленном репозитории git, и использовать эту конфигурацию для запуска настраиваемой команды сборки, подобной https://semantic-ui.com/Introduction/build-tools.html.

Рабочий процесс будет таким. Запустите gulp build-new (в разветвленном репозитории семантического пользовательского интерфейса), который принимает аргумент, скажем, для пути theme.config (указывающий на путь темы вашего проекта реакции) и помещает его в разветвленное репо, а затем запускает gulp build, генерируя тематический CSS. у вас может быть задача даже заменить выполненный css в свой проект реакции.

person Sudheer    schedule 29.01.2018

arrow_upward
1
arrow_downward

Я наткнулся на это руководство по использованию настраиваемой темы с использованием сематического пользовательского интерфейса и CRA, в котором подробно описан этот процесс. Это довольно долгий процесс, поэтому я оставлю его со ссылкой.

Вот ссылка на репозиторий учебника на Github.

person Zumo    schedule 19.03.2018

arrow_upward
0
arrow_downward

Ознакомьтесь с официальным шаблоном, он содержит предварительно сконфигурированную среду с Webpack3 и примеры тематики, которые следуют руководству по тематике.

person Oleksandr Fediashov    schedule 25.02.2018