反应媒体查询不会改变网格列答案

【问题标题】：react media query does not change grid columns反应媒体查询不会改变网格列
【发布时间】：2020-11-02 18:29:37
【问题描述】：

这是我第一次在 react 中使用媒体查询，如果max-width:600px，我想将我的所有元素显示在一列而不是 2 列中

我的代码：

import '../App.css';

<div className="results">
  {loading ? (
    <p>Loading</p>
  ) : (
    //this is the style of my <ul> with 2 columns
    <ul className="recipe-list" style={{ listStyle: 'none', display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
      {recipes.map((r, index) => (
        <li style={{ margin: '120px' }} key={index}>
          <Recipe pic={r.recipe.image} ingredients={r.recipe.ingredientLines} meal={r.recipe.label} />
        </li>
      ))}
    </ul>
  )}
</div>;

App.css

@media only screen  and (max-width : 600px) {
  //does not work !
 .recipe-list{
   grid-template-columns: 1fr;
 }
}

我认为我的风格没有改变，因为我在元素内设置了网格模板列，但我不确定。

【问题讨论】：

标签： reactjs media-queries

【解决方案1】：

<ul className="recipe-list" style={{ listStyle: 'none', display: 'grid', gridTemplateColumns: '1fr 1fr' }}>

也尝试将style 移动到app.css。我认为内联 css 具有更高的优先级。

【讨论】：