Autocomplete compoenent - style label

[gfrileux]

Hi,

We have started using the new lab component called Autocomplete - it's awesome !

One question we have, is how do you style the <label> element.
We couldn't find a tag in the CSS API that targets the element. We also couldn't find a way to access it using classes as its class label is MuiFormLabel-root which seems to relate to the MuiFormLabel component which is not surfaced in the component Autocomplete.

We ended up using the global override, in order to apply some style to it, but that means that the style applies to the entire codebase which is not ideal.

I have made a sandbox example : https://codesandbox.io/s/material-demo-xg2hj?fontsize=14&hidenavigation=1&theme=dark

The idea is to apply an ellipsis text-overflow on the label, so that if it's too loong it doesn't overflow outside the component.

Any help would be greatly appreciated!

Thanks

Greg

[oliviertassinari]

@vinoa-team You can remove the Autocomplete component from the equation, and only consider the TextField component. See #12255. You have a bunch of different ways to solve this. Maybe the simplest is

.MuiInputLabel-root {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  right: 22px;
  bottom: 0px;
}

[gfrileux]

@oliviertassinari thanks so much for the fast response !
I've had a good look at the solution in ticket 12255 but it suggests using a InputLabel component, which doesn't quite work for the AutoComplete, as if I add that into the renderInput function, it creates a label above the input field, which is not what I want.

Maybe I've not understood your suggestion, but I feel if I try to target the TextField component I'm left with the same issue of having no CSS node to target in the CSS API for that component.

Am I missing something here ?
Thanks!

[gfrileux]

Sorry - forget that - working Sandbox here if anyone is interested: https://codesandbox.io/s/material-demo-xg2hj?fontsize=14&hidenavigation=1&theme=dark

[oliviertassinari]

Thanks for sharing this solution, it looks valid.