How can I change the slot CSS of FormControlLabel?

mui5

"@mui/material": "^5.8.6",

I want to have light font weight for label.

I tried this but i still get bold:

<FormControlLabel
  sx={{ label: { fontWeight: "light" } }}
  value="range"
  control={<Radio />}
  label="DateTime Range"
/>

But when I tried using css class it works.

<FormControlLabel
  sx={{ '& .MuiFormControlLabel-label': { fontWeight: "light" } }}
  value="range"
  control={<Radio />}
  label="DateTime Range"
/>

Admittedly, this could be made a bit more clear in the MUI docs.

> You can override the style of the component using one of these
> customization options:
>
> - With a global class name.
> - With a rule name as part of the component's
> styleOverrides property in a custom theme.

The first column in the CSS table is the "Rule Name" for customizing the component using the Theme style overrides at the theme level. (These generally align with the slot names, but should not be confused for them.) For example:

const theme = createTheme({
  components: {
    MuiFormControlLabel: {
      styleOverrides: {
        label: {
          color: "red"
        }
      }
    }
  }
});

The second column lists the "Global class name" that can be used to style a component at the component [implementation] level via sx/styled. For example:

<FormControlLabel
  sx={{
    "& .MuiFormControlLabel-label": {
      color: "green"
    }
  }}
  value="range"
  control={<Radio />}
  label="DateTime Range"
/>

or

const StyledFormControlLabel = styled(FormControlLabel)`
  .MuiFormControlLabel-label {
    color: blue;
  }
`;

...


<StyledFormControlLabel
  value="range"
  control={<Radio />}
  label="DateTime Range"
/>

Working CodeSandbox: https://codesandbox.io/s/theme-style-overrides-example-256pzg?file=/demo.tsx

Aside

The value light is not a valid named font-weight value (valid named values are normal, bold, lighter, and bolder), but sx will translate light for you to it's relative font weight (theme.typography.fontWeightLight), whereas styled and createTheme() will not do it for you automatically.

> The fontFamily, fontSize, fontStyle, fontWeight properties map their
> value to the theme.typography value:
>
> <Box sx={{ fontWeight: 'light' }} />
> // equivalent to fontWeight: theme.typography.fontWeightLight
>