Material-UI v5 Styled API 自定义classes无法作用于子元素问题排查

核心错误点 #

• 样式选择器语法错误：&.${classes.loadingBox}写法中&和类名之间没有空格，代表匹配自身同时携带该类名的StyledFullPageLayout组件，而你的loadingBox类是加在内部的Box元素上，永远匹配不到。如果要匹配后代元素，需要加空格写成& .${classes.loadingBox}。
• 自定义组件未透传className：如果你自定义的FullPageLayout组件没有将接收的className属性绑定到根DOM节点上，那么你加在StyledFullPageLayout上的testcss类不会实际生效到DOM元素上。
• 属性取值错误：flex布局的alignItems合法取值为center，你写的middle不属于flex布局的有效值，即使选择器匹配成功也无法实现垂直居中效果。
• 额外小问题：代码中直接使用了未定义的peers变量，运行时会抛出引用错误。

修正后的代码示例 #

调整styled规则写法 #

const StyledFullPageLayout = styled(FullPageLayout)(({theme}: any) => ({
    // 匹配自身携带testcss类的场景，不需要空格
    [`&.${classes.testcss}`]: {
        background: 'rgba(255,0,0,0.2)',
    },
    // 匹配后代元素携带loadingBox类的场景，&后加空格
    [`& .${classes.loadingBox}`]: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        minHeight: 200, // 增加最小高度，避免容器无高度看不出居中效果
    },
    [`& .${classes.errorBox}`]: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
    },
}));

确认FullPageLayout透传className #

确保你的FullPageLayout组件的根节点绑定了className，示例：

// FullPageLayout组件定义示例
function FullPageLayout(props) {
  return (
    // 必须把props.className绑定到根元素
    <div className={props.className}>
      {props.children}
    </div>
  )
}

v5使用建议 #

MUI v5已经不再推荐v4的手动定义类名绑定样式的写法，更建议直接使用sx属性快速写内联样式，或者给需要自定义样式的元素单独创建styled组件，不需要手动维护类名映射，示例：

<Fade in={loading}>
  <Box sx={{
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    minHeight: 200
  }}>
    <CircularProgress />
  </Box>
</Fade>

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