Каким образом вы стилизуете react компоненты?

Question

[alvepoe]

Добрый день, в своем проекте на клиентской стороне используем React и Material-ui. В принципе как-то жили используя withStyles и className, стилизуя каждый компонент отдельно, но теперь столкнулись с тем, что компонент, состоящий из других мелких нами написанных компонентов и material ui компонентов, на странице и в модальном окне нарисован на макете по-разному, в связи с этим наконец задались вопросом как поступить в такой ситуации, если вся его функциональность нам необходима, но в другой оболочке? как же лучше вести стили в реакт-приложениях? Какие практики сейчас считаются лучшими для подобных случаев?

Comments

[Mikhail Osher]

Слишком абстрактный вопрос. Приведите пример конкретного компонента. И скажу сразу, что для других компонентов, нередко, могут быть другие решения.

[Сергей delphinpro]

CSS нужно использовать.
А все эти ваши css-in-js от лукавого...

[Роман Татаринов]

Сергей delphinpro, просто вы не умеете его готовить)

[alvepoe]

Сорри за долгий ответ, допустим, мы используем из material-ui, часть стандартных стилей нам пришлось переопределить через theme provider, часть прописываем через classNames, по итогу у нас имеется таб-панель с определенными шириной, цветом фона, цветами выбранного и невыбранного таба и т.д. Такую таб панель мы использовали на обычной странице приложения, а теперь нам нужно использовать её же, но с другим цветом фона и шириной в модальном окне. И возникает вопрос, каким образом нам контролировать то какие стили применять в зависимости от места использования компонента?

[Петр Мухуров]

alvepoe, мы используем систему префиксов, один и тот же компонент, но с разными префиксами для классов легко переиспользовать

[alvepoe]

Петр Мухуров,а можно поподробнее с примерчиком?)

[Петр Мухуров]

alvepoe,

const MyComp = ({ _prefix, ... }) => <div className={`${_prefix}-tabs_wrapper`}></div>

MyComp.defaultProps = {
  _prefix: "my-project"
}

это префикс можно таскать через контекст и доставать его оттуда, где нужно, тогда этот префикс нужно будет объявить только в самом верху

[alvepoe]

Петр Мухуров, спасибо, будем пробовать)

[Алексей]

Можно же добавить пропсов для компонента и в зависимости от них стилизовать для разных случаев