Как изменять стили в зависимости от Роута React?

Question

[VladilenOk]

Использую в маленьком проекте css modules, и возникла проблема.

Есть компонент Wrapper, который должен иметь отступ 20px на странице Home, и не иметь отступа на странице About.

Но проблема в том что все компоненты имеют динамические именования стилей, и написать
.home .wrapper {margin-bottom: 20px} нельзя.

Как решается проблема с динамическим изменением стилем в данном случае?

Answer 1

[Denis Masson]

Передавать значение в пропсы компонента и стили этого компонента вынести в JS, ну у меня получается как то так
P.S я юзаю обычно библиотеку styled components, но можно и без нее

import styled from 'styled-components';
const Wrapper= styled.div(props => ({
    marginBottom: props.mb ? props.mb :  "20px",
}));