React基于屏幕尺寸的条件样式问题排查与优化求助

问题现象 #

作为React新手，尝试通过deviceSize变量基于屏幕尺寸实现条件样式，控制文本居中，但出现以下异常：

• 屏幕尺寸>993px时，textAlign设置不生效
• 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属性值使用错误**：CSS的text-align没有"none"这个有效值，浏览器无法识别该值，导致样式不生效。需要将"none"替换为"initial"，该值会恢复元素的默认文本对齐方式。

修正后的代码：

const styles = {
    footerColOne:{
        textAlign: deviceSize > 993 ? "initial" : (deviceSize < 993 && deviceSize > 578) ? "center" : "initial",
        paddingLeft: deviceSize < 993 ? "26px" : "80px",
        paddingTop: deviceSize < 993 ? "28px" : "63px",
    },
    footerColTwo:{
        textAlign: deviceSize > 993 ? "initial" : (deviceSize < 993 && deviceSize > 578) ? "center" : "initial",
        paddingLeft: deviceSize < 993 ? "26px" : deviceSize < 578 ? "51px" : "50px",
        paddingTop: deviceSize < 993 ? "40px" : "86px",
    },
}

优化方案：使用CSS媒体查询 #

虽然三元表达式逻辑可行，但CSS媒体查询是更优的实现方式，无需通过JS监听屏幕尺寸，更符合样式管理的最佳实践，也能避免潜在的性能问题。示例如下：

/* 默认样式（屏幕>993px） */
.footer-col-one {
  padding-left: 80px;
  padding-top: 63px;
  text-align: initial;
}

.footer-col-two {
  padding-left: 50px;
  padding-top: 86px;
  text-align: initial;
}

/* 屏幕≤993px时的通用样式 */
@media (max-width: 992px) {
  .footer-col-one {
    padding-left: 26px;
    padding-top: 28px;
  }
  .footer-col-two {
    padding-left: 26px;
    padding-top: 40px;
  }
}

/* 578px<屏幕≤993px时，文本居中 */
@media (min-width: 579px) and (max-width: 992px) {
  .footer-col-one, .footer-col-two {
    text-align: center;
  }
}

/* 屏幕≤578px时的样式 */
@media (max-width: 578px) {
  .footer-col-two {
    padding-left: 51px;
  }
}

组件中直接使用类名：

<Col lg={3} className="footer-col-one">

内容的提问来源于stack exchange，提问作者programmerGuy