Как прописать классы в css modules в зависимости от условия (React)?

Question

[Karin Park]

Всем привет.
Есть проект на реакте. В компоненте appointments есть родительский блок без стилей.
Я хочу использовать этот компонент в двух разных местах(компонентах) с разными стилями в зависимости от того в каком месте он вызывается. Как лучше это реализовать? Или подскажите что где почитать.
для лучшего объяснения:

Компонент appointments:
Условие: если это компонент LastAppointments, то к блоку применяется класс ROW, если это компонент AllAppointments то класс COLUMN.

<div className={Row или Column}> какой то код </div>

компонент LastAppointments:
вызов компонента appointments с классом row.

компонент AllAppointments:
вызов компонента appointments с классом column

Answer 1

[8XL]

Можно без лишних стейтов обойтись.

<LastAppointments name={'LastAppointments'} />

То есть передаешь в пропсы компонента его имя(ну или любой другой идентификатор)

<div className={ props.name == 'LastAppointments' ? 'row' : 'column' }> какой то код </div>

В самом диве проверяешь, какое имя пришло в пропсах.

Answer 2

[Kirill Makarov]

создаешь
[state, setState] = useState(false)
его меняешь как надо

<div className={ state ? "row" : "column"}> какой то код </div>