Repository: material-ui
Issue: [joy-ui] FormLabel won't accept specific variant
Labels: waiting for 👍,typescript,package: joy-ui,enhancement

### Duplicates

- [X] I have searched the existing issues

### Latest version

- [X] I have tested the latest version

### Steps to reproduce 🕹

I'm trying to create a new variant to some elements in a form, and I achieved it with Sheet and Input, but I had no luck with FormLabel since it won't accept the attribute `variant` 

### Current behavior 😯

What I did for Sheet was
```
<Sheet variant="coordinates">
...
</Sheet>
```
and then
```
declare module '@mui/joy/Sheet' {
    interface SheetPropsVariantOverrides {
        coordinates: true
    }
}
...
extendTheme({
        components: {
           JoySheet: {
                styleOverrides: {
                    root: ({ownerState}) => ({
                        ...(
                            ownerState.variant === 'coordinates' && {
                                ...
   ```

Then I replicated the same using `@mui/joy/Input` and `JoyInput` instead of `@mui/joy/Sheet` and `JoySheet`

### Expected behavior 🤔

I'd expect to do the same using 

```
declare module '@mui/joy/FormLabel' {
    interface FormLabelPropsVariantOverrides {
        coordinates: true
    }
}
...
extendTheme({
        components: {
         JoyFormLabel: {
                styleOverrides: {
                    root: ({ownerState}) => ({
                        ...(
                            ownerState.variant === 'coordinates' && {
                                width: '100%',
                                justifyContent: 'center',
                            }),
                    }),
                },
            },
```

### Context 🔦

I want to have declared the `variant` in all the components needed and be able to change it to some other later

Maybe I'm getting it wrong and It has to be done other way.

### Your environment 🌎

npx @mui/envinfo
```
  System:
    OS: macOS 12.4
  Binaries:
    Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
    Yarn: Not Found
    npm: 8.6.0 - ~/.nvm/versions/node/v14.16.1/bin/npm
  Browsers:
    Chrome: 112.0.5615.137
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.5
  npmPackages:
    @emotion/react: ^11.10.6 => 11.10.6 
    @emotion/styled: ^11.10.6 => 11.10.6 
    @mui/base:  5.0.0-alpha.125 
    @mui/core-downloads-tracker:  5.12.1 
    @mui/icons-material: ^5.11.16 => 5.11.16 
    @mui/joy: ^5.0.0-alpha.75 => 5.0.0-alpha.75 
    @mui/material: ^5.12.1 => 5.12.1 
    @mui/private-theming:  5.12.0 
    @mui/styled-engine:  5.12.0 
    @mui/system:  5.12.1 
    @mui/types:  7.2.4 
    @mui/utils:  5.12.0 
    @types/react: ^18.0.35 => 18.0.35 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^4.9.5 => 4.9.5 
```
tsconfig.json
```
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}
```