如何在 React jsx 中应用响应式样式？答案

【问题标题】：how to apply responsive style in React jsx?如何在 React jsx 中应用响应式样式？
【发布时间】：2020-03-03 17:56:43
【问题描述】：

我将响应式样式应用于我的 react 项目中 jsx 样式标签内的可疑元素。这是一些代码。

<div>
  <img
    className="image"
    src={resizedUrl}
    width={params.width}
    height={params.height}
    style={{ ...shadowStyle }} />
  <div className="time">{photo.photo.published_at}</div>
  <div className="article-title" style={{ cursor: "pointer" }}>
    {photo.photo.title}
    <label className="feed">{photo.photo.feed_name}</label>
  </div>
  <div className="article-description">
    {photo.photo.short_description}
  </div>
</div>
...
<style jsx>{`
  .article-title {
    font-weight: 700;
    color: #000000;
    display: -webkit-box;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  @media (max-width: 768px) .article-description {
    font-weight: 700;
    height: 48;
    color: black;
    display: -webkit-box;
    padding: 5px;
    display: block;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
  }
`}</style>

我只想为文章描述应用响应式样式，但我的代码现在无法正常工作。请分享您的解决方案，以便在 React 的 jsx 样式中应用该解决方案。

干杯。

【问题讨论】：

将@media 的内容包装在{ 和} 中？
抱歉，我没能正确理解您的意思。能否详细描述一下？
见安迪霍夫曼的回答。

标签： javascript html css reactjs

【解决方案1】：

您需要重组语法上无效的媒体查询，以封装该断点的所有样式。

@media (max-width: 768px) {
    .article-description {
      font-weight: 700;
      height: 48;
      color: black;
      display: -webkit-box;
      padding: 5px;
      display: block;
      line-height: 1.2;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .something-else { … }
  }

【讨论】：