React.js的媒体查询语法 [英] Media query syntax for Reactjs

问题描述

如何在Reactjs中执行以下CSS媒体查询?

How do I do the following CSS media query in Reactjs?

.heading {
  text-align: right;
  /* media queries */
  @media (max-width: 767px) {
    text-align: center;
  }
  @media (max-width: 400px) {
    text-align: left;
  }
}

我尝试了以下操作，但是它引发了语法错误并且无法编译.

I tried the following but it throws a syntax error and fails to compile.

heading: {
  textAlign: 'right',
  @media (maxWidth: '767px') {
    textAlign: 'center';
  }
  @media (maxWidth: '400px') {
    textAlign: 'left';
  }
}

推荐答案

如果有特殊情况，当您需要在应用程序内部获取媒体查询结果时(例如，您希望在移动版本中显示某些组件) ，则可以使用反应敏感或

If you have a special cases, when you need to get media query result inside you react app (for example, you want to show some component at mobile version), you can use helpers like react-responsive or react-media-hook.

这篇关于React.js的媒体查询语法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！