React UI
- Варианты использования
- Квик-старт @skbkontur/react-ui собранная версия библиотеки
- Слоу-старт retail-ui исходники для самостоятельной сборки, для переопределения
.less
-переменных
- FAQ
Варианты использования
Квик-старт
yarn add @skbkontur/react-ui
И используем компонентики у себя в проекте:
import Button from '@skbkontur/react-ui/Button';import Toast from '@skbkontur/react-ui/Toast'; const MyApp = <div> Click this button <Button =>Click me</Button> </div>;
Если ругается, что regeneratorRuntime
не определен, то необходимо подключить regenerator-runtime
или @babel/polyfill
, например в index.html
Квик-старт подойдёт, если Вебпак настроен на сборку. Например, вы используете create-react-app
. В противном случае добавьте в конфиг Вебпака style-
, css-
и file-loader
Слоу-старт
yarn add retail-ui
Необходимо установить как зависимости и добавить в конфиг Вебпака следующие лоадеры:
module: rules: test: /\.jsx?$/ use: loader: 'babel-loader' options: presets: '@babel/preset-env' '@babel/preset-react' '@babel/preset-flow' plugins: '@babel/plugin-proposal-class-properties' '@babel/plugin-proposal-object-rest-spread' include: /retail-ui/ test: /\.less$/ use: 'style-loader' loader: 'css-loader' options: modules: 'global' 'less-loader' test: /\.$/ use: 'file-loader' ;
Хотим другой цвет кнопки!
Тут придется юзать слоу-старт. В конфиге нужно указать:
resolve: alias: 'react-ui-theme': path
Список переменных можно глянуть в components/variables.less
Глобальные css-стили приложения портят внешний вид контролов
Если библиотека используется в проекте с легаси, где стилизация сделана прямо по названиям тегов, то внешний вид контролов из библиотеки может сильно испортиться
Если нет возможности разобрать легаси, то можно увеличить специфичность селекторов в библиотеке, тогда стили контролов будут приоритетнее стилей из легаси проекта
Специфичность достигается за счет n-кратного повторения css-класса react-ui
в селекторе стилей. Количество повторений задается через переменную @specificity-level
, значение по умолчанию равно нулю, то есть по умолчанию css-класс react-ui
никак ни на что не будет влиять
Чтобы специфичность заработала в легаси проекте, react-блок, в котором используются компоненты из библиотеки, должен быть обернут в тег с css-классом react-ui
Пример настройки специфичности
/* ... */@specificity-level: 5;/* ... */
FAQ
Сломались стили при использовании css-loader 2.x (create-react-app/CRA 3.x)
Во 2-й версии, css-loader
отключили использование css-modules
по умолчанию.
Решение: В опциях к css-loader
явно задать modules: 'global'
.
Как использовать retail-ui с storybook 5.x?
В 5-й версии изменилось API сторибука для кастомизации настроек webpack.
Кроме того был изменен дефолтный webpack конфиг. Это порождает проблемы вида storybooks/storybook#4891.
Решение: Заменить лоадеры для css/less
. Например так на свои
Error: Can't resolve 'mask-char-font/font.eot'
Возникает ошибка Ошибка проявляется при использовании css-loader@1.x
с выставленой опцией modules
.
Решение: Обновить css-loader
до 2-й версии или дополнительно указать опцию url: false
Не могу прокинуть css-класс компонентам. Как кастомизировать?
Никак.
Помощь в развитии
Мы рады любой сторонней помощи. Не стесняйтесь писать в issues
баги и идеи для развития библиотеки.