如何在Material-UI中指定MuiChip组件的borderRadius属性？

你可以通过以下几种方式正确修改Chip组件的borderRadius属性：

• 方案1：使用sx属性（单次局部修改最优解）
  直接在Chip组件上通过sx属性传入样式，不需要额外定义类，优先级足够覆盖原生样式：

<Chip 
  label="测试标签"
  // 可根据需求调整数值，默认Chip的borderRadius为16px
  sx={{ borderRadius: 4 }}
/>

• 方案2：全局主题配置（统一修改项目内所有Chip样式）
  在项目的主题定义中添加MuiChip的样式覆盖规则：

import { createTheme, ThemeProvider } from '@mui/material/styles';

const customTheme = createTheme({
  components: {
    MuiChip: {
      styleOverrides: {
        root: {
          borderRadius: 4
        }
      }
    }
  }
});

// 后续用ThemeProvider包裹你的应用根组件即可

• 方案3：封装自定义StyledChip组件（多次复用场景使用）

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

const StyledChip = styled(Chip)(() => ({
  borderRadius: 4
}));

// 业务代码中直接使用<StyledChip label="xxx" />替代原生Chip

之前root类不生效的原因 #

大概率是你自定义的CSS类优先级低于MUI组件的内置样式，解决方法除了上述官方推荐的样式覆盖方案外，也可以临时在样式后加!important强制生效（不推荐长期使用）。

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