It's worth noting that the MUI documentation could benefit from more clarity on this topic.
In order to customize the style of a component, you have a few options to choose from:
The first column in the CSS table contains the "Rule Name" for customizing a component using Theme style overrides at the theme level. (These are generally aligned with the slot names, but should not be mistaken for them.) For example:
const theme = createTheme({
components: {
MuiFormControlLabel: {
styleOverrides: {
label: {
color: "red"
}
}
}
}
});
The second column displays the "Global class name" that can be utilized to style a component at the implementation level via sx or styled. Here's an 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"
/>
View Working CodeSandbox Example: https://codesandbox.io/s/theme-style-overrides-example-256pzg?file=/demo.tsx
Additional Information
Please note that the value "light" is not considered a valid named font-weight value (valid named values include normal, bold, lighter, and bolder). However, when using sx, it will automatically map "light" to its relative font weight (theme.typography.fontWeightLight), while styled and createTheme() won't perform this mapping for you by default.
The properties like fontFamily, fontSize, fontStyle, and fontWeight will align their value with the theme.typography setting:
<Box sx={{ fontWeight: 'light' }} />
// equivalent to fontWeight: theme.typography.fontWeightLight