React内联CSS中如何指定多个兼容不同浏览器的width属性值

你遇到的问题本质是React内联样式的语法限制：style属性接收的是普通JavaScript对象，同一键名重复定义时后写的会覆盖前面的，最终渲染只会保留最后一个width值，自然无法实现多前缀兼容。

方案1：使用CSS类定义（最推荐） #

把样式迁移到CSS文件、CSS模块或styled-components等样式方案中，按顺序写多份前缀属性即可，浏览器会自动忽略不支持的声明，匹配自身可识别的最后一个有效值：

.list-item {
  display: inline-block;
  list-style: none;
  width: -webkit-fill-available;
  width: -moz-fit-content;
  width: fit-content; /* 可选补充标准属性，适配后续无前缀的浏览器支持 */
}

组件内直接绑定类名：

<li className="list-item">

方案2：React 18+ 内联样式数组写法 #

如果必须使用内联样式，React 18及以上版本支持style属性传入样式对象数组，重复的属性不会被覆盖，会全部写入元素的行内样式中，由浏览器自行适配：

<li 
  style={[
    { display: "inline-block", listStyle: "none" },
    { width: "-webkit-fill-available" },
    { width: "-moz-fit-content" }
  ]}
>

方案3：低版本React兼容方案 #

如果使用的是React 18以下版本，可以通过简单的浏览器判断动态返回对应前缀的属性值：

// 工具函数获取适配当前浏览器的width值
const getCompatibleWidth = () => {
  if (navigator.userAgent.includes('Firefox')) {
    return '-moz-fit-content'
  }
  return '-webkit-fill-available'
}

// 组件内使用
<li style={{
  display: "inline-block",
  listStyle: "none",
  width: getCompatibleWidth()
}}>

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