如何修改MUI5中FormControlLabel的插槽CSS设置轻量字体？

在使用MUI5（版本@mui/material": "^5.8.6"）时，若要将FormControlLabel的标签字体设为light权重，直接通过sx={{ label: { fontWeight: "light" } }}设置不会生效——标签仍会保持默认的粗体样式；而使用CSS类选择器的方式sx={{ '& .MuiFormControlLabel-label': { fontWeight: "light" } }}则能正常生效。

为什么直接设置label样式无效？ #

FormControlLabel组件的label属性是用来定义标签的内容（比如字符串或React元素），并非样式配置的入口。你通过sx写的label对象，并不会作用到渲染出来的标签文本元素上，自然无法改变字体权重。

而.MuiFormControlLabel-label是MUI为标签文本元素自动生成的CSS类名，通过sx里的后代选择器& .MuiFormControlLabel-label，可以精准定位到目标元素，从而覆盖MUI默认的字体权重样式。

有效实现方式示例 #

方式一：直接在sx中使用类选择器

import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';

function App() {
  return (
    <FormControlLabel
      control={<Checkbox />}
      label="这是轻量字体的标签"
      sx={{ '& .MuiFormControlLabel-label': { fontWeight: "light" } }}
    />
  );
}

方式二：用styled组件封装（适合多处复用）

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

// 封装带轻量标签的FormControlLabel
const LightLabelFormControlLabel = styled(FormControlLabel)({
  '.MuiFormControlLabel-label': {
    fontWeight: "light",
  },
});

function App() {
  return (
    <LightLabelFormControlLabel
      control={<Checkbox />}
      label="这是复用的轻量字体标签"
    />
  );
}

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