@holism/core
v3.0.9-1
Published
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
Downloads
323
Maintainers
Readme
This project was bootstrapped with Create React App.
- React
- Styled-components
- Typescript
import { Button, Input } from '@holism/core';
Темизация
В библиотеке реализована возможность темизации компонентов. Компоненты используют в своих стилях переменные, заданные в дефолтной теме (import { DefaultTheme } from '@holism/core';), с помощью темизации значения данных переменных можно перезадать, тем самым изменив внешний вид компонентов. Механизм темизации позаимствован из styled-components.
Как внедрить темизацию в свой проект:
- с помощью функции createTheme нужно создать новую тему. Для этого в функцию необходимо передать объект, с теми свойствами, которые вы хотите перезадать. Внутри себя createTheme смерджит заданные вами опции с дефолтной темой.
- затем нужно импортировать компонент ThemeProvider из @holism/core или styled-components. В ThemeProvider вы можете обернуть тот компонент, который хотите стилизовать, или сразу целую часть приложения, тогда тема будет применена сразу к нескольким компонентам.
- В ThemeProvider задайте параметр theme, в который передайте результат выполнения функции createTheme
Подробнее о механизме темизации можно прочесть здесь https://styled-components.com/docs/advanced. Возможен вариант, когда один ThemeProvider вложен в другой и так далее.
Примеры темизации:
import { ThemeProvider, createTheme, Button } from '@holism/core';
render ( <ThemeProvider theme={createTheme({ borderWidth: '4px', shape: { borderRadiusSmall: '5px' } })}> Привет );
- Если вы используйте в своем приложении ThemeProvider из styled-components и оборачиваете в него компоненты, но не передаете в нем дефолтную тему, возникнут ошибки в компонентах. Обязательно передайте в компоненты DefaultTheme, как в примере ниже!
import { ThemeProvider } from 'styled-components'; import { DefaultTheme } from '@holism/core';
const globalTheme = {
primary: {
bg: '#fff',
logo: '#fff',
colorText: '#000',
},
secondary: {
bg: '#fff',
logo: '#000',
colorText: '#000',
},
};
render (
<ThemeProvider theme={{ ...globalTheme, ...DefaultTheme }}>
// содержит компоненты из '@holism/core'
<AppComponent/>
<ThemeProvider theme={{ ...globalTheme, ...DefaultTheme }}>
);