ReactJS как применить один class css с разными стилями для разных страниц?

Question

[gomerIT]

У меня есть несколько страниц в приложений, все настроены с помощью роутинга. Есть так же карточки с товарами их 3 вида и у всех разные стили. Хотелось бы использовать единый класс для всех товаров

.product-card

и там уже по бэму (.product-card__photo, .product-card__title ...), но реакт не позволит мне это сделать т.к у меня SPA и стили будут перебивать друг друга. Есть ли решения данной проблемы за искл. "придумать для каждых товаров индивидуальный класс" ?

Comments

[Vladimir Lewandowski]

У вас с архитектурой что-то не то. Как вариант, добавьте проп type в компонент карточки и бэм-модификаторы вещайте

Answer 1

[Kirill Makarov]

Во первых в реакт className
Во вторых ничего не должно друг друга перебивать, создаешь файл, example.css импортируешь его где тебе надо, в любом компоненте или странице, и ты уже можешь применить этот className в этом компоненте. Так же как вариант можно все это подключить через index.css но тогда если не ошибаюсь нужно scss, и импортировать

Comments

[gomerIT]

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

[Kirill Makarov]

gomerIT, у тебя сразу должно быть все нормально на этапе разработки