AlexCraft

Мне больше всего нравится 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 в своих проектах.
Но такой вариант только для функциональных компонентов.