[material-ui][Filled Input] Undocumented non-themeable values about material-ui HOT 3 OPEN

Thanks for the report @chbiel! This looks like something we should improve for v7 when we update our designs. Would an API like Joy UI's CSS vars components tokens help?

There's actually very brief documentation about it here: https://mui.com/material-ui/react-text-field/#customization. If anyone wishes to open a PR to improve that docs section to be more thorough until we fix this properly, that would be very welcome.

from material-ui.

hey @DiegoAndai, thanks for getting back :)
I did not had a look into Joy UI yet, but I will take a look.

I think my point is more in the direction of consistency instead of how to customize.
And maybe it's more a kind of discussion instead of an issue (beside improving the docs for the moment).

So we are currently trying to create a theme for our company and getting into the details I get more and more confused.

One of the examples I mentioned above: I can define a full theme, but the FilledInput seems not to be compliant with all the rest, as the different color shades are defined in the component itself instead of picking configuration from the theme.
I know I can explicitly target the different css classes and slots to overwrite those, but that does not feel right from a library point that offers different configurations, but does not pick them up here.
And the FilledInput has fixed values e.g. for box shadow instead of using theme variables:

Another thing I found is, that (at least in the MenuItem, did not check other places yet) palette.action.selected is used based on the primary color. And I did not find a central way to overwrite that behaviour.

So it feels like either the whole Theme configuration is not explained in a way that I understand it or the different theme configurations are not used in a consistent way. I think I should not need to read the underlying source code to understand how to customize a component.
But maybe I am missing something here so please correct me if I am wrong.

And sorry for getting a little bit off-issue-topic... :)

from material-ui.

Thanks @chbiel for the detailed feedback 🤩

So it feels like either the whole Theme configuration is not explained in a way that I understand it or the different theme configurations are not used in a consistent way. I think I should not need to read the underlying source code to understand how to customize a component.

This resonates with me, and I think with much of the community. We plan to revamp the theme structure for v7. Specifically, we will likely adopt Material Design 3's token structure, which should help by:

• Providing consistency in how theme tokens are used in components
• Providing an easy way to override those tokens via CSS variables

This is still somewhat speculative as we haven't started planning v7 in detail yet. Improving look and feel will be the main topic of that major release, so we'll be looking into the theme structure, and this feedback will be very useful.

from material-ui.