如何不覆盖原有sx属性 为Material UI组件合并传入styles对象

你不需要额外引入工具库，用MUI原生支持的写法就能实现样式合并，不会丢失原有sx配置：

• 对象展开合并
  在sx配置对象中用ES6展开运算符...引入已有的styles对象即可，调整展开位置可以控制样式优先级：

  // styles优先级更高：重名属性会覆盖内联sx的同名配置
  <Button
    sx={{
      backgroundColor: "red",
      fontWeight: "700",
      ...styles
    }}
  >
    Example
  </Button>
  
  // 内联sx优先级更高：重名属性会覆盖styles的同名配置
  <Button
    sx={{
      ...styles,
      backgroundColor: "red",
      fontWeight: "700",
    }}
  >
    Example
  </Button>
  

• 数组形式合并
  MUI的sx属性原生支持接收样式对象数组，框架会自动按顺序合并所有样式规则，数组位置越靠后优先级越高，适合多组样式叠加的场景：

  <Button
    sx={[
      {
        backgroundColor: "red",
        fontWeight: "700",
      },
      styles
      // 可继续追加更多样式对象，包括条件判断返回的样式
    ]}
  >
    Example
  </Button>
  

两种写法都只会覆盖重名属性，非重名的样式规则会全部保留，不会出现整段样式被覆盖的问题。

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