CSS to change react MUI select

Question

I need to change react material UI select component UI to like this.

This is the CSS I have entered up to now

 const styles = {
    width:'250px',
    border:'1px solid gray',
    borderBottom:'none',
    padding:'1rem'
  }

This is the react code.

 <FormControl styles={styles}>
          {/* <InputLabel id='demo-simple-select-label'>Categories</InputLabel> */}
          <Select
            labelId='demo-simple-select-label'
            id='demo-simple-select'
            value={age}
            onChange={handleChange}
            style={styles}
          >
            <MenuItem value={'All'}>All</MenuItem>
            {categories.map((category) => (
              <MenuItem value={category} key={category}>
                {category}
              </MenuItem>
            ))}
          </Select>
        </FormControl>

Here I comment on the InputLable component. So now If nothing is selected the bar is empty. I want to display the text "Categories" when nothing is select using CSS. also fine-tune this code to match 100% as the given design.

How do I achieve this using CSS?

This is my full code https://codesandbox.io/s/material-demo-forked-wcmx1?file=/demo.js:1028-1606

Any help!

Thanks in advance.

Answer 1

from docs : ( https://material-ui.com/api/select/ )

1. displayEmpty

If true, a value is displayed even if no items are selected. In order to display a meaningful value, a function should be passed to the renderValue prop which returns the value to be displayed when no items are selected. You can only use it when the native prop is false (default).

2. renderValue

Render the selected value. You can only use it when the native prop is false (default).

Signature: function(value: any) => ReactNode value: The value provided to the component.

sandbox