Реагировать получить стилизованный компонент на основе условия

Question

Я пытаюсь изменить свой проект на эксклюзивное использование стилевых компонентов. У меня есть что-то вроде этого в

 <div className={isGrid ? "card-grid" : "card-list"}>

, в котором мой div получает сетку карт или список карт className на основе условия. Как мне реализовать это с помощью styled-component и без файлов css? Также мне нужно, чтобы className всегда был сеткой карты ниже 600px (@media)

Answer 1

В styleled-компонентах вы можете использовать ${prop => prop.isGrid} для рендеринга этих логи c. Для медиазапроса вы также можете использовать обычный запрос в styled-components.