我正在嘗試在 React js 中做一些條件樣式。反應(yīng)非常新，所以可能有更好的方法來做到這一點(diǎn)，但在網(wǎng)路上搜尋無濟(jì)於事。我正在嘗試根據(jù)所述螢?zāi)怀叽鐧z查螢?zāi)怀叽绾蜆邮?。在這個(gè)用例中，我想根據(jù)螢?zāi)怀叽鐚⒁恍┪淖志又?。有人可以告訴我是否有更好的方法來做到這一點(diǎn)？目前這對(duì)我不起作用。
編輯：在那裡放置了一些日誌，它所做的正是當(dāng)頁面加載時(shí)「textAlign」根本不應(yīng)用於元素，即使螢?zāi)怀叽缡?> 993px。一旦我將螢?zāi)豢s小到 < 993px 並且 > 578px 就會(huì)將「textAlign：center」應(yīng)用於元素，然後一旦它縮小到 < 578px，它不會(huì)將其設(shè)定回?zé)o。它使其保持居中。
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",
},
}
然後我這樣稱呼這種風(fēng)格
<Col lg={3} style={ styles.footerColOne }>
非常感謝任何幫助。
上次編輯：
#所以我發(fā)現(xiàn)媒體查詢確實(shí)是這裡的首選方式，儘管我犯了一個(gè)白癡錯(cuò)誤並且當(dāng)該屬性不存在該值時(shí)將textAlign 設(shè)置為none ，但我上面的三元條件有效。在這種情況下，應(yīng)將其設(shè)定為 initial。
2
0
0
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 如果螢?zāi)怀叽绲挽洞?max-width，則將套用此 media 查詢 中的所有樣式。
如果螢?zāi)怀叽绱箪?code>min-width，則將套用此media查詢中的所有樣式。
