Механизм темизации для React-компонентов, написанных с использованием CSS модулей.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__
src
.gitignore
.npmignore
CHANGELOG.md
LICENSE first commit Dec 3, 2018
README.md
babel.config.js
jest.config.js
package.json
setupFileTest.js

README.md

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-плагином.