search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.85k stars 32.25k forks source link

[material-ui][Filled Input] Undocumented non-themeable values #40962

Open chbiel opened 9 months ago

chbiel commented 9 months ago

Steps to reproduce

Link to live example: https://github.com/mui/material-ui/blob/0b38955227cf4fc879fea5c8d23e167a5b9c4936/packages/mui-material/src/FilledInput/FilledInput.js#L45-L49 and e.g. https://github.com/mui/material-ui/blob/0b38955227cf4fc879fea5c8d23e167a5b9c4936/packages/mui-material/src/FilledInput/FilledInput.js#L52

Nothing to reproduce.

Current behavior

After searching for hours where the background colors for the FilledInput come from, I finally started to read the code of the FilledInput and found that it has a wierd an completely undocumented way on how to theme it (or at least I was not able to find any documentation about it).

So maybe the issue is Make the FilledInput use variables from theme or Missing documentation about

Expected behavior

Documentation on how to customize FilledInput or a FilledInput that uses default theme values

Further question: Isn't the palette.action exactly for this case but not used?

Search keywords: FilledInput, background

DiegoAndai commented 9 months ago

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.

chbiel commented 9 months ago

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: https://github.com/mui/material-ui/blob/90f655aebd4df815b7a043d4a6613ecc7ec5fb28/packages/mui-material/src/FilledInput/FilledInput.js#L174 What in the end renders the FilledInput from my perspective as not compliant with the theme approach, but instead forces a user to copy over the whole component css definitions and overwrite every color.

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. https://github.com/mui/material-ui/blob/90f655aebd4df815b7a043d4a6613ecc7ec5fb28/packages/mui-material/src/MenuItem/MenuItem.js#L84-L86 That leads to a greenish background color what does not fit into the whole design at all.

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

DiegoAndai commented 8 months ago

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:

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.

chbiel commented 8 months ago

Thanks :) So my conclusion is, that a fully themed MUI can only be achived, by also looking in the components sources and check if the component has some non-themable css configurations, that I have to overwrite one-by-one.

DiegoAndai commented 8 months ago

A fully themed MUI can only be achived, by also looking in the components sources and check if the component has some non-themable css configurations, that I have to overwrite one-by-one.

We'll be improving this experience as soon as possible