@holism/components v0.9.9

This project was bootstrapped with Create React App.

• React
• Styled-components
• Typescript

import { Button, Input } from '@holism/components';

Темизация

В библиотеке реализована возможность темизации компонентов. Компоненты используют в своих стилях переменные, заданные в дефолтной теме (import { DefaultTheme } from '@holism/core';), с помощью темизации значения данных переменных можно перезадать, тем самым изменив внешний вид компонентов. Механизм темизации позаимствован из styled-components.

Как внедрить темизацию в свой проект: 1) с помощью функции createTheme нужно создать новую тему. Для этого в функцию необходимо передать объект, с теми свойствами, которые вы хотите перезадать. Внутри себя createTheme смерджит заданные вами опции с дефолтной темой. 2) затем нужно импортировать компонент ThemeProvider из @holism/core или styled-components. В ThemeProvider вы можете обернуть тот компонент, который хотите стилизовать, или сразу целую часть приложения, тогда тема будет применена сразу к нескольким компонентам. 3) В ThemeProvider задайте параметр theme, в который передайте результат выполнения функции createTheme

Подробнее о механизме темизации можно прочесть здесь https://styled-components.com/docs/advanced. Возможен вариант, когда один ThemeProvider вложен в другой и так далее.

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

1) import { ThemeProvider, createTheme, Button } from '@holism/core';

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

2) Если вы используйте в своем приложении 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 }}>
);