设置 MUI 系统道具和样式化组件之间的优先级

Question

当使用带有 MUI 系统道具的样式化组件时，我发现样式化组件样式优先，例如在下面的代码片段中，框将使用

justify content

设置为

space-around

:

const CustomBox = styled(Box)(() => ({
  display: 'flex',
  justifiyContent: 'center'
}));

function MyComponent() (
  <CustomBox justifyContent='space-around'>
    <span className='some-icon'></span>
    <span>some text</span>
  </CustomBox>
)

我可以管理这种“样式化组件方式”并将道具传递给

CustomBox

，但我发现 MIUI 系统道具看起来像本地覆盖，但被它所应用的组件覆盖是违反直觉的。

MUI 中是否有一些配置可以使 MUI System Props 优先于 Styled Components 样式？

Answer 1

带有

styled

的样式被组件上的

sx

prop 覆盖。通常这可用于将任何其他本地样式添加到带有 MUI 的

styled

组件。

除非指定禁用它，

styled

如果与基本 JSX 组件（例如

sx

）一起使用，默认情况下还会添加对

div

属性的支持，以实现快速样式覆盖。

有关演示的更多示例：stackblitz

const CustomBox = styled(Box)({
  display: 'flex',
  justifyContent: 'center',
});

const MyComponent = () => {
  return (
    <CustomBox sx={{ justifyContent: "flex-start" }}>
      <span className="some-icon"></span>
      <span>some text</span>
    </CustomBox>
  );
};