如何修改Material-UI框架中Chip组件的字体大小

解决方案 #

你可以根据自己的需求选以下任意一种方式实现：

方式1：在你现有自定义样式的基础上修改（局部生效，仅作用于当前加了classes.chip的Chip组件）

你之前修改不生效的核心原因是Chip的文本内容默认包裹在内部的.MuiChip-label子元素中，该元素有默认的字体样式，优先级高于根元素的自定义样式，直接修改根元素样式会被覆盖。调整你的样式配置即可：

const styles = {
  root:{
  },
  chip:{
    margin: "2px",
    padding: "2px",
    // 针对Chip内部的label元素设置字体大小
    '& .MuiChip-label': {
      fontSize: "18px" // 替换为你需要的字体大小即可
    }
  }
}

const SmartTagChip = (props) =>{
  const classes = useStyles();
  // 这里注意你原来的代码里直接用了item.label，需要从props里取对应值，修正避免报错
  const { item } = props;
  return(  
    <Chip style={{color:"white"}} clickable className={classes.chip}
    color="default" 
     label={item.label} variant="outlined"/>
  )
}

如果你确实想通过覆盖.MuiChip-root类实现，可以提升自定义样式的优先级：

const styles = {
  chip: {
    // 双&符号提升样式优先级，覆盖默认的MuiChip-root样式
    '&&': {
      fontSize: "18px",
      margin: "2px",
      padding: "2px"
    }
  }
}

方式2：全局覆盖所有Chip组件的字体大小

如果需要项目内所有Chip的字体都统一调整，可以通过自定义主题实现：

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

const customTheme = createTheme({
  components: {
    MuiChip: {
      styleOverrides: {
        // 覆盖根元素样式
        root: {
          fontSize: "18px"
        },
        // 也可以直接覆盖label元素样式，优先级更高
        label: {
          fontSize: "18px"
        }
      }
    }
  }
});

// 把你的根组件包裹在ThemeProvider里即可
const App = () => {
  return (
    <ThemeProvider theme={customTheme}>
      {/* 你的应用其他组件 */}
    </ThemeProvider>
  )
}

方式3：单组件临时修改

如果仅需要给单个Chip调整大小，直接用style属性或者MUI提供的sx属性即可：

<Chip
  style={{color:"white", fontSize: "18px"}}
  // 或者用sx属性（仅MUI v5及以上支持）
  // sx={{ fontSize: "18px" }}
  clickable 
  className={classes.chip}
  color="default" 
  label={item.label} 
  variant="outlined"
/>

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