Can someone help me modify the appearance of the react material UI select component to match this design:
https://i.sstatic.net/EhcWR.png
https://i.sstatic.net/L2te2.png
I have already applied the following CSS styling:
const styles = {
width:'250px',
border:'1px solid gray',
borderBottom:'none',
padding:'1rem'
}
This is the corresponding React code snippet:
<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>
I want to display "Categories" when nothing is selected in the bar, and make further adjustments to achieve a 100% match with the given design using CSS. Any suggestions on how I can accomplish this?
You can view my full code here: https://codesandbox.io/s/material-demo-forked-wcmx1?file=/demo.js:1028-1606
Your assistance would be greatly appreciated. Thank you!