Может дело в дефисе?
Или в значении переменной?
Я, к примеру, медиазапросы только так получаю @media #{$m_1200}{}
так нормально работает и реакт тут не причем, скорее всего
посмотри сюда https://csszengarden.com/pages/alldesigns/
все это на одной и той же минимальной разметке.
Так что правильно написали тут неоднократно - учи CSS. А стеки - это стандартизация и удобство, личное и в команде.