Теперь CSS-блоки живут внутри файлов компонентов естественным для себя образом — в CSS-формате (против инлайн-стилей JS-объектов). И не нужно беспокоиться за глобальную область видимости.

lokhmakov 10 апр 2017 в 18:57

Мы используем для работы с CSS https://github.com/kriasoft/isomorphic-style-loader

Который добавляет и убирает CSS в зависимости от того смонтирован компонент или нет (SSR в комплекте), примерно так:

class YourComponent extends React.Component {
  ...
}

import withStyles           from 'isomorphic-style-loader/lib/withStyles'
import s                    from './Root.css'

import { compose }          from 'redux'

export default compose(
  withStyles(s),
)(YourComponent)

lokhmakov 10 апр 2017 в 18:59

Так же можно обратить внимание на react-css-themr, который позволяет полностью переопределять стили компонента путем задания другого css.

lokhmakov 11 апр 2017 в 14:05

Потестировал Styled JSX и сходу не нашел варианта реализации комплексных селекторов:

.root {
}

.root > div {
}

`root > div` не работает

fr_ant 11 апр 2017 в 13:58

src/node_modules/components/

а зачем в node_modules то складывать?

lokhmakov 11 апр 2017 в 14:01

После длительной дискуссии `src/node_modules` в `create-react-app` выбрано лучшим решением для абсолютных импортов.

Для создания библиотеки это так же позволяет решить задачу разделения демонстрационного приложения в стандартной структуре, а самого кода библиотеки в `src/node_modules`.