❤
npm
Sign UpSign In

react-styling-hoc

1.0.3 • Public • Published

react-styling-hoc npm version

Механизм темизации для React-компонентов, написанных с использованием CSS модулей.
Позволяет переопределять стили для любых присутствующих в разметке компонента селекторов.

Механизм работы

Установка

 npm i react-styling-hoc

Явное задание темы

Button.jsx
import defaultStyles from './Button.css';
import styleHOC from 'react-styling-hoc';
 
class Button extends Component {
    render() {
        const { styles } = this.props;
 
        return <div className={styles.button}>Text</div>;
    }
}
 
const StylableButton = styleHOC(defaultStyles)(Button);
 
export default StylableButton;
Button.css
.button {
    background: #ffdd2d;
    color: #333;
    border: none;
}
myButton.theme.css
.button {
    background: red;
}
myCode.jsx
import Button from '@tinkoff-ui/button';
import themeStyles from 'myButton.theme.css';
 
const MyButton = props => <Button {...props} themeStyles={themeStyles} />;
 
const MyComponent = () => <div>
    <div>Something special</div>
    <MyButton/>
</div>;

Сброс стандартных стилей

Если вам не нужны стандартные стили компонента, и вы хотите их написать сами с нуля, то с помощью пропа resetDefaultStyles можно их сбросить.

const MyButton = props => <Button
    {...props}
    themeStyles={themeStyles}
    resetDefaultStyles
/>;

Темизация через контекст

Бывают случаи, когда мы не можем внедриться в чужую часть кода.

Например, мы имеем некоторый компонент InputGroup, который использует в себе темизируемый компонент Input. Явно заменить <Input> на <ThemedInput> мы не можем.

В таких случаев предусмотрена темизация через контекст, задать который можно через компонент ThemeProvider.

InputGroup.jsx
import Group from '@tinkoff-ui/group';
import Input from '@tinkoff-ui/input';
 
 
const InputGroup = () => <Group>
    <Input/>
    <Input/>
    <Input/>
</Group>;
 
export default InputGroup;
myCode.jsx
import InputGroup from '@tinkoff-ui/inputGroup';
import Input from '@tinkoff-ui/input';
import { ThemeProvider } from 'react-styling-hoc';
 
import themeStyles from 'myInput.theme.css';
 
const MyComponent = () => <div>
    <div>Something special</div>
    <ThemeProvider
        themes={[
            {
                component: Input,
                themeStyles
            }
        ]}
    >
        <InputGroup/>
    </ThemeProvider>
</div>;

Ура, мы великолепны, теперь все инпуты внутри ThemeProvider будут выглядеть иначе!

ThemeProvider имеет единственный проп themes, принимающий в себя объект, ключами в котором являются названия темизирумых компонентов, а значениями - объекты с пропсами theme HOC'а.

ThemeProvider можно вкладывать друг в друга, одинаковые темы будут переопределяться, а разные сохраняться.

Инъекция зависимостей

Бывают случаи, когда переопределять нужно не только стили, но и целые части компонента или разметки. Например, мы решили провести A/B-тестирование полей ввода даты, и нам необходимо заменить использование <Calendar> на <NewCalendar> внутри компонента <DateInput>.

Если мы заранее предусмотрим возможность переопределения, то аналогично стилям через Theme HOC и <ThemeProvider> мы можем передать в компонент новый компонент календаря.

InputDate.jsx
 import Calendar from '@tinkoff-ui//calendar';
 import Input from '@tinkoff-ui/input';
 import styleHOC from 'react-styling-hoc';
 
 const InputDate = styleHOC()(({ themeBlocks }) => {
     const CalendarElem = themeBlocks && themeBlocks.Calendar || Calendar;
 
     return <div>
         <Input/>
         <CalendarElem/>
     </div>;
 });
 
 export default InputDate;
myCode.jsx
import InputDate from '@tinkoff-ui/inputDate';
import { ThemeProvider } from '@tinkoff-ui/style-hoc';
import NewCalender from './NewCalender.jsx';
 
 
const MyComponent = () => <div>
    <div>Something special</div>
    <ThemeProvider
        themes={[
            {
                component: InputDate,
                themeBlocks: {
                    Calendar: NewCalender
                }
            }
        ]}
    >
        <InputDate/>
    </ThemeProvider>
</div>;

Повышение веса стилей

Все cелекторы с переопределяющими стилями должны всегда иметь большую специфичность, чем базовые. Для этого можно собственноручно повышать ее или воспользоваться небольшим postcss-плагином.

Readme

Keywords

Package Sidebar

Install

npm i react-styling-hoc

Repository

github.com/TinkoffCreditSystems/react-styling-hoc

Homepage

github.com/TinkoffCreditSystems/react-styling-hoc

Weekly Downloads

5

Version

1.0.3

License

Apache-2.0

Unpacked Size

39 kB

Total Files

9

Last publish

Collaborators

  • superol3g
Try on RunKit
Report malware