Repository: material-ui
Issue: [FormControlLabelProps] Styled CSS rules doesn't work
Labels: support: question,package: system

### Duplicates

- [X] I have searched the existing issues

### Latest version

- [X] I have tested the latest version

### Current behavior 😯

I tried to customize the FormControlLabel with  the emotions styled approach:

```javascript 
import React from 'react';
import Radio from './radio';
import { styled } from '@mui/material/styles';
import { ITheme, defaultSizes } from '../../rwetheme';
import { FormControlLabel, FormControlLabelProps } from '@mui/material';

export interface IRadioLabel extends FormControlLabelProps {
  size?: defaultSizes;
  theme?: ITheme;
}

const Label: React.FC<IRadioLabel> = styled(FormControlLabel, {
  slot: 'Root',
})<IRadioLabel>((props) => {
  return {
    root: {
      fontSize: '4rem',
      border: '1px solid green !important',
    },

  ///--> doesn´t work ;-(
    label: {
      color: 'pink',
      border: '1px solid green !important',
    },
  };
});

const RadioLabel: React.FC<Omit<IRadioLabel, 'control'>> = (
  props: Omit<IRadioLabel, 'control'>
) => {
  return (
    <Label
      labelPlacement="top"
      value={props.value}
      control={<Radio size={props.size} />}
      label={props.label}
      {...props}
    />
  );
};
export default RadioLabel;
```

As described in API Doc there should be CSS rules for label, disabled ..(have not tried the position rules so far) but the doesn´t work with styled modification.

### Expected behavior 🤔

my expectation is that I can target label, disabled CSS rules like in other MUI5 components with styled
I tried to change it with the styleOverride approach in a theme..which works. 

```javascript 

export default {
  styleOverrides: {
    root: {
      background: 'pink'
    },

  //--> Hej, it works ;-)
    label: {
      fontSize: '15px',
    },
  },
```

Using theme and overrides  + variants e.g. for size props is only possible to target on classname level, which might be unstable (prefix, suffix).

Like :

```javascript 

variants: [
    {
      props: { size: 'small' },
      label: {
        color: 'green',
        fontSize: '10px',
      },
      style: {
        '.MuiFormControlLabel-label': {
          // really?

        },
      },
    },
    {
      props: { size: 'large' },
      style: {
        '.MuiFormControlLabel-label': {
          // this sucks
        },
      },
    },
  ],
```



### Steps to reproduce 🕹

Steps:

1. use code above



### Context 🔦

_No response_

### Your environment 🌎

<details>
  <summary>`npx @mui/envinfo`</summary>

```
 System:
    OS: macOS 12.0.1
  Binaries:
    Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 8.1.3 - ~/.nvm/versions/node/v14.16.1/bin/npm
  Browsers:
    Chrome: 96.0.4664.55  (used)
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.1
  npmPackages:
    @emotion/react: 11.1.5 => 11.1.5 
    @emotion/styled: 11.1.5 => 11.1.5 
    @mui/base:  5.0.0-alpha.58 
    @mui/icons-material: ^5.0.1 => 5.0.1 
    @mui/material: ^5.2.2 => 5.2.2 
    @mui/private-theming:  5.2.2 
    @mui/styled-engine:  5.2.0 
    @mui/system:  5.2.2 
    @mui/types:  7.1.0 
    @mui/utils:  5.2.2 
    @types/react: 17.0.3 => 17.0.3 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2 
    styled-components: ^5.3.1 => 5.3.1 
    typescript: ~4.3.5 => 4.3.5
```
</details>