[英]how to apply responsive style in React jsx?
I apply a responsive style to suspect elements inside the jsx style tag on my react project.我将响应式样式应用于我的 React 项目中 jsx 样式标签内的可疑元素。 Here is some code for that.这是一些代码。
<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>
I just gonna apply resposive style for the article-description, but my code is not working now.我只是要为文章描述应用响应式样式,但我的代码现在不起作用。 Please share your solution to apply that inside the jsx style on React.请分享您的解决方案,以将其应用到 React 的 jsx 样式中。
Cheers.干杯。
You need to restructure your media query, which is syntactically invalid, to encapsulate all styles for that breakpoint.您需要重构语法上无效的媒体查询,以封装该断点的所有样式。
@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 { … }
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.