[material-ui][Select] Not working with the styled input prop: Prop className did not match

[RiccardoRomagnoli]

Steps to reproduce

Link to live example

Current behavior

When using a styled component for the input prop of the component Select:

• Styled does not get applied
• SSR warning gets thrown: Prop className did not match. Server: "MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary css-f85pof-MuiInputBase-root-MuiOutlinedInput-root" Client: "MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl css-f85pof-MuiInputBase-root-MuiOutlinedInput-root"

Expected behavior

The Select styles are the one in the styled component, if you uncomment the styles from the globals.css they get applied.

Context

I'm trying to change the styles of the input component of the Select

Your environment

npx @mui/envinfo

  System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 18.17.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.6.7 - C:\Program Files\nodejs\npm.CMD    
    pnpm: Not Found
  Browsers:
    Chrome: 121.0.6167.140
    Edge: Chromium (121.0.2277.98)
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.7 
    @mui/core-downloads-tracker:  5.14.0 
    @mui/icons-material: ^5.14.0 => 5.14.0
    @mui/lab: ^5.0.0-alpha.137 => 5.0.0-alpha.137
    @mui/material: ^5.14.0 => 5.14.0
    @mui/material-nextjs: ^5.15.6 => 5.15.6
    @mui/private-theming:  5.13.7
    @mui/styled-engine:  5.13.2
    @mui/system:  5.14.1
    @mui/types:  7.2.4
    @mui/utils:  5.14.1
    @types/react: ^18.2.6 => 18.2.15
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: ^5.0.4 => 5.1.6

Search keywords: Select styled input

[ZeeshanTamboli]

Styled does not get applied

@RiccardoRomagnoli Since you're styling the label of the Select, which is rendered via the InputLabel component, you should use the styled API on the FormControl component. The label is outside of the OutlinedInput, so it's not targeted there. Here's the updated CodeSandbox. Additionally, you won't need the custom input prop.

SSR warning gets thrown: Prop className did not match. Server: "MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary css-f85pof-MuiInputBase-root-MuiOutlinedInput-root" Client: "MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl css-f85pof-MuiInputBase-root-MuiOutlinedInput-root"

I don't see the warning in your provided CodeSandbox, however, it looks related to #27512.