Javascript 如何在React jsx中应用响应式风格？

我将响应样式应用于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>

{photo.photo.published_at}
{photo.photo.title}
{photo.photo.feed_name}
{photo.photo.short_description}
...
{`
.文章标题{
字号：700；
颜色：#000000；
显示：-网络工具包盒；
线高：1.2；
溢出：隐藏；
文本溢出：省略号；
}
@介质（最大宽度：768px）。文章描述{
字号：700；
身高：48；
颜色：黑色；
显示：-网络工具包盒；
填充物：5px；
显示：块；
线高：1.2；
溢出：隐藏；
文本溢出：省略号；
}
`}

我只是想在文章描述中应用responsive风格，但我的代码现在不起作用。 请分享您的解决方案，将其应用于React上的jsx样式中

---

干杯。

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

@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 { … }
  }

---

将

@media

内容包装在

{

和

}

中？对不起，我无法正确理解您的意思。请你详细描述一下好吗？请看安迪·霍夫曼的回答。