reactjs - 反应媒体查询不会改变网格列
问题描述
这是我第一次在反应中使用媒体查询,我想在一个列中显示我的所有元素而不是 2 如果max-width:600px
我的代码:
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>;
应用程序.css
@media only screen and (max-width : 600px) {
//does not work !
.recipe-list{
grid-template-columns: 1fr;
}
}
我认为我的风格没有改变,因为我在元素内设置了网格模板列,但我不确定。
解决方案
<ul className="recipe-list" style={{ listStyle: 'none', display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
尝试移动style
到app.css
以及。我认为内联 CSS 具有更高的优先级。
推荐阅读
- javascript - 如何通过深度链接使用 React Navigation 获取组件中的 URI?
- git - Make branch point to the tip of the branch that originated it
- cmake - How to use Qt Creator as a smart editor?
- javascript - Updating property when promise is resolved
- docker - 使用 docker-compose 在 Dockerfile 中运行 echo 失败
- android - BindingAdapter doesn't work with DataBinding
- hyperledger-fabric - 创建频道时出现此错误?
- java - mXParser 导数给出 NAN
- responsive - Firefox 开发者版 (63) 在响应模式下检查元素时不再显示 css 规则
- java - 如何在Java中找到图像的阈值?