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