我正在尝试在 React js 中做一些条件样式。反应非常新，所以可能有更好的方法来做到这一点，但在互联网上搜索无济于事。我正在尝试根据所述屏幕尺寸检查屏幕尺寸和样式。在这个用例中，我想根据屏幕尺寸将一些文本居中。有人可以告诉我是否有更好的方法来做到这一点？目前这对我不起作用。
编辑：在那里放置了一些日志，它所做的正是当页面加载时“textAlign”根本不应用于元素，即使屏幕尺寸是 > 993px。一旦我将屏幕缩小到 < 993px 并且 > 578px 就会将“textAlign：center”应用于元素，然后一旦它缩小到 < 578px，它不会将其设置回无。它使其保持居中。
const styles = {
footerColOne:{
textAlign: deviceSize > 993 ? "none" : (deviceSize < 993 && deviceSize > 578) ? "center" : "none",
paddingLeft: deviceSize < 993 ? "26px" : "80px",
paddingTop: deviceSize < 993 ? "28px" : "63px",
},
footerColTwo:{
textAlign: deviceSize > 993 ? "none" : (deviceSize < 993 && deviceSize > 578) ? "center" : "none",
paddingLeft: deviceSize < 993 ? "26px" : deviceSize < 578 ? "51px" : "50px",
paddingTop: deviceSize < 993 ? "40px" : "86px",
},
}
然后我这样称呼这种风格
<Col lg={3} style={ styles.footerColOne }>
非常感谢任何帮助。
上次编辑：
所以我发现媒体查询确实是这里的首选方式，尽管我犯了一个白痴错误并且当该属性不存在该值时将 textAlign 设置为 none ，但我上面的三元条件有效。在这种情况下，应将其设置为 initial。
雷雷
media query非常适合这里。@media screen and (min-width: 578px) and (max-width: 993px) { .someclass { text-align:center; } } @media screen and (max-width: 993px) { .someclass { text-align:center; padding-left:26px; padding-right:28px; } } @media screen and (min-width: 993px) { .someclass { text-align:left /* none as you wanted. /*; } }既然如此，
max-width如果屏幕尺寸低于此max-width，则将应用此media 查询中的所有样式。如果屏幕尺寸大于
min-width，则将应用此media查询中的所有样式。