MUI5 sx支柱行为

Question

我玩的材料UI5SX道具只是出于好奇，不知道如何使它类似于以前的MUI 4 makeStyles fn。我想把JSS类线虫传给sx道具。因此，在这个代码片段中，我想重写偶数字符串的颜色：

import { Typography } from "@mui/material";
const styles = {
  green: {
    color: 'green',
  },
  red: {
    color: 'red',
  },
  
}
const options = ['even', 'odd', 'even', 'odd']
export default function CssModulesSlider() {
  console.log('classes', styles)
  return (
    <>
    {options.map((item, index)=> {
      if(index %2 === 0){
        return (
          <Typography sx={{...styles.red}}>
              {item}
          </Typography>
        )
      } else {
       return (
        <Typography sx={{...styles.red, ...styles.green,}}>
            {item}
        </Typography>
       ) 
      }
      
    })}
    </>
  );
}

MUI将其编译成不同的CSS类：

.css-**1kivl2a**-MuiTypography-root {
//some mui typography stuff here
    color: red;
}
.css-**1ti676r**-MuiTypography-root {
//some mui typography stuff here
    color: green;
}

在这个代码框示例里一切都很完美，

直到我更改了在sx道具中定义类的顺序：

//from
sx={{...styles.red, ...styles.green,}}
//to
sx={{...styles.green, ...styles.red,}} 

虽然样式对象仍然与您在console.log中看到的相同，但MUI将其全部编译为一个CSS类，因此所有列表项都具有相同的颜色: red规则。这与CSS规则覆盖无关，这取决于它的顺序，因为在第二种情况下，编译的CSS中的类是相同的

当然，使用CSS模块、情感或样式组件更好。但有人知道为什么会这样吗？

Answer 1

这不是MUI，而是如何传播(.)作品

​

const styles = {
  green: {
    color: 'green',
  },
  red: {
    color: 'red',
  }, 
}

console.log('...red + ...green => green', {...styles.red, ...styles.green});
console.log('...green + ...red => red', {...styles.green, ...styles.red});

​