MUI Change css of Label of Select and color of selected option

Question

I am struggling with MUI components few days, building a page in a React app.

I'm almost done, just 2 things missing...

I am using a Select and an Autocomplete in my page. In both of them I set {shrink=false} to the input label, but I don't know how to apply display:none once an option is selected (like instead of shrinking just disappear - now they overlap on top of each other - I don't know why it's not like this by default when shrink is set to false...).

Also, in the select component, I need the colour of the selected option to be white when it's inside the input text (instead of the label - now, together with it... - now it's black).

Is anyone able to help me? Or at least pointing me a direction where to look at?

I'm going through the documentation, but I am not able to figure out a way. Should I do something when the handleChange method is called? - That is the moment... but then, how to change their style?

Thanks to anyone who can help xxx

Answer 1

I solved it using the state:

const [selected, setSelected] = useState(false);

In the <Select> component:

onChange={(event) => {
  setSelected(true);
  handleChange(event);
}}

And then I set the input label value to be either a string OR the selected option:

<InputLabel
  ref={inputLabel}
  className={classes.inputLabel}
  id="simple-select-label"
  shrink={false}
>
  {selected ? '' : 'Itinerario'}
</InputLabel>

Hope to help someone. x