Skip to content

Instantly share code, notes, and snippets.

@blia
Last active November 9, 2015 18:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save blia/9ca7f33fe3f236bff42c to your computer and use it in GitHub Desktop.
Save blia/9ca7f33fe3f236bff42c to your computer and use it in GitHub Desktop.

Пишете вы, к примеру, прототип на бутстрапе. Сделали форму. В форме есть кнопка. Нормальный jsx

<button type="button" className={cx('btn', 'btn-success', 'btn-sm')} onClick={this.save}>
  Save
</button>

С использованием библиотеки http://react-bootstrap.github.io

<Button bsStyle="success" bsSize="small" onClick={this.save}>
  Save
</Button>

Сильно выиграли? Ок. Прототип получился классный сделующий этап делаем из него что-то более уникальное. Для начала дадим нормальные имена классов, будем использовать тотже sass. Для начала мы просто воспользуемся миксинами bootstrap. https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/mixins/_buttons.scss и css-modules. С первым вариантом все просто.

import styles from 'style.sass'
<button type="button" className={cx('my-save-button').bind(styles)} onClick={this.save}>
  Save
</button>

А что делать со 2м? Переписывать на нэйтив jsx?

@mr-mig
Copy link

mr-mig commented Nov 9, 2015

Именно так.
Пока коммунити не поймёт, как правильно перегружать тему в компоненте - только так.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment