Мне больше всего нравится css-in-js, если работаете на React с хуками, то можно реализовать css-in-js на хуках. Вариантов много, но лучше изолировать стили в компоненте, переменные не обязательно использовать из scss, гораздо проще использовать такую схему: хук useWindowSize (гуглится легко), а потом просто создаете несколько переменных и функцию-обработчик:
import useWindowSize from 'yourPathHere/hooks/useWindowSize'
const App = () => {
const size = useWindowSize()
const [width, setWidth] = useState(null)
const [height, setHeight] = useState(null)
const [direction, setDirection] = useState(null)
useEffect(() => {
if (size.width > 1200) {
setWidth('500px')
setHeight('300px')
setDirection('row')
} else if (size.width > 900 && size.width <= 1200) {
setWidth('100%')
setHeight('250px')
setDirection('column')
}
} else return
}, [ size.width ])
// yourCodeHere
}
// Потом в стилях задаете:
text_block: {
width: width
height: height,
display: 'flex',
flexDirection: direction
}
И адаптивная верстка готова )
Это можно использовать и с UI-библиотеками и без них, как угодно. Я использую MaterialUI в своих проектах.
Но такой вариант только для функциональных компонентов.
Простой
Средний
