React内联CSS中width的降级实现是否正确？多width仅最后一个生效

你的写法不正确 #

React内联样式本质是JavaScript对象，对象中重复的键会被后续的键覆盖，所以你写的前三个width属性都会被最后一个width: calc(...)覆盖，最终只有最后一个样式生效，完全达不到降级回退的目的。

正确实现方式 #

方式一：使用字符串形式的style属性 #

把所有降级声明拼接成一个字符串传递给style属性，浏览器会按顺序解析所有width声明，自动忽略不支持的，取最后一个有效的值：

<React.Fragment>
  <Container
    style={`
      width: ${this.props.portalSidebarFixed ? 100 - this.props.theme.sidebar.width.percent + "%" : "100%"};
      width: -webkit-calc(${this.props.portalSidebarFixed ? "100% - " + this.props.theme.sidebar.width.pixel + "px" : "100%"});
      width: -moz-calc(${this.props.portalSidebarFixed ? "100% - " + this.props.theme.sidebar.width.pixel + "px" : "100%"});
      width: calc(${this.props.portalSidebarFixed ? "100% - " + this.props.theme.sidebar.width.pixel + "px" : "100%"});
    `}
    ref={this.containerRef}
    onScroll={this.handleScroll}
  >
  </Container>
</React.Fragment>

方式二：使用CSS类（更推荐） #

内联样式不利于维护和性能优化，更推荐把降级逻辑写在CSS类中，再通过React动态切换类：

CSS代码：

.container {
  width: 100%;
}
.container.sidebar-fixed {
  width: 70%; /* 替换为你的百分比回退值 */
  width: -webkit-calc(100% - 340px);
  width: -moz-calc(100% - 340px);
  width: calc(100% - 340px);
}

React代码：

<React.Fragment>
  <Container
    className={`container ${this.props.portalSidebarFixed ? 'sidebar-fixed' : ''}`}
    ref={this.containerRef}
    onScroll={this.handleScroll}
  >
  </Container>
</React.Fragment>

原理说明 #

浏览器解析CSS属性时，会按声明顺序依次处理，遇到不支持的属性值会直接跳过，最终使用最后一个能识别的有效值：

• 不支持calc的浏览器使用最开始的百分比回退值
• 老版本webkit内核浏览器使用-webkit-calc
• 老版本火狐使用-moz-calc
• 现代浏览器使用标准calc

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