MUI - Outlined select label is not rendering properly

Question

As per the demo, the label for a MUI outlined select input should sit on top of the top border of the select box.

However, in my application, the z-index of the label seems to be placing it behind the top border and thus it looks like a line is cutting through the label.

I have pretty much taken the code exactly from the documentation, and as far as I know, do not have any styles conflicting with this input element. I have compared the styles in the debugger to what I have and what is present in the documentation, and I do not see any of my first party CSS files causing a different style to be set on the element.

Any idea what might be going wrong here?

Here is the source code:

<FormControl variant='outlined' style={{ width: '100%' }} margin={'1'}>
  <InputLabel id='test-select-label'>Label</InputLabel>
  <Select
    labelId='test-select-label'
    id='test-select'
    value={'test1'}
    onChange={e => setTest(e.target.value)}
    size='small'
  >
    <MenuItem key={1} value={'test'} >Test 1</MenuItem>
    <MenuItem key={2} value={'test2'} >Test 2</MenuItem>
  </Select>
</FormControl>

Answer 1

If you add the label property to your select component your problem should disappear.

...
<Select
  value={value}
  onChange={(e) => setValue(e.target.value)}
  label="Label" // add this 
>
  <MenuItem key={1} value="test">
    Test 1
  </MenuItem>
  <MenuItem key={2} value="test2">
    Test 2
  </MenuItem>
</Select>
...

Here is a live demo where you can see the difference:

Answer 2

Try this method, it worked for me.

JSX:

<TextField select variant={"outlined"} style={{width: "100%"}} label="Label">
    <MenuItem key={1} value="test">
        Test 1
    </MenuItem>
    <MenuItem key={2} value="test2">
        Test 2
    </MenuItem>
</TextField>

CSS:

.MuiSelect-outlined.MuiSelect-outlined, .MuiSelect-outlined.MuiSelect-outlined:active, .MuiSelect-outlined.MuiSelect-outlined:focus  {
    background-color: transparent;
    text-align: left;
    font-family: sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}