CSS to change react MUI select - css

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/)
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).
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