如何配置使MUI系统属性优先级高于Styled Components样式？

你遇到的问题确实存在——当用Styled Components包装MUI组件时，Styled Components生成的类样式优先级会覆盖MUI系统属性转换的样式。目前有两种方案可以让MUI系统属性的样式优先级更高：

方案一：使用MUI原生的styled API #

放弃使用Styled Components的styled函数，改用MUI提供的styled（从@mui/material/styles导入）来创建自定义组件。MUI的styled会自动处理样式优先级，确保系统属性生成的样式能覆盖自定义的组件样式。

示例代码：

import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';

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

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

方案二：通过StyledEngineProvider调整样式注入顺序 #

如果你坚持使用Styled Components的styled，可以通过MUI的StyledEngineProvider组件控制样式注入顺序，让MUI的样式后注入，从而获得更高优先级。

1. 首先导入StyledEngineProvider：

import { StyledEngineProvider } from '@mui/material/styles';

2. 在应用的根组件外层包裹StyledEngineProvider，并设置injectFirst={false}（注：默认值即为false，若你之前修改过配置则显式设置）：

function App() {
  return (
    <StyledEngineProvider injectFirst={false}>
      {/* 你的应用组件，包括MyComponent */}
      <MyComponent />
    </StyledEngineProvider>
  );
}

这样MUI系统属性生成的样式会被后注入，优先级高于Styled Components的自定义样式，就能实现你想要的“本地覆盖”效果。

另外，你代码里有个笔误：justifiyContent应该是justifyContent，修正后能避免不必要的问题。

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