Блог

Мне нравится иметь все медиа-запросы в одном месте, обычно в файле App.css, потому что, когда я хочу что-то изменить в зависимости от размера, я вижу все задействованные компоненты сразу.

Я ищу хороший способ сделать это с помощью стилизованных компонентов. Там стили обычно прикрепляются к файлу, в котором определены стилизованные компоненты. Я не хочу использовать оболочки для ссылки на них с помощью className.

Есть ли у кого-нибудь хороший способ справиться с этим?

После обсуждения появилось следующее решение:

 const reducer = (accumulated, [condition, css]) =>
accumulated  
`
@media(${condition}) {
    ${css[componentName]}
}
`
const addMedia = componentName => Object.entries(theme.media).reduce(reducer, "")
  

Теперь у вас есть все мультимедийные запросы в одном месте, и вам нужно просто добавить их в стилизованный компонент через:

 ${addMedia("componenName")}