@rea-hole/core
TypeScript icon, indicating that this package has built-in type declarations

4.0.2 • Public • Published

This project was bootstrapped with 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 вложен в другой и так далее.

Примеры темизации:

import { ThemeProvider, createTheme, Button } from '@rea-hole/core';

render ( <ThemeProvider theme={createTheme({ borderWidth: '4px', shape: { borderRadiusSmall: '5px' } })}> Привет );

  1. Если вы используйте в своем приложении 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 (
  <ThemeProvider theme={{ ...globalTheme, ...DefaultTheme }}>
    // содержит компоненты из '@rea-hole/core'
    <AppComponent/>
  <ThemeProvider theme={{ ...globalTheme, ...DefaultTheme }}>
);

Install

npm i @rea-hole/core

DownloadsWeekly Downloads

5

Version

4.0.2

License

MIT

Unpacked Size

3.77 MB

Total Files

1345

Last publish

Collaborators

  • alex_penkin