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

[chbiel]

Steps to reproduce

Link to live example:

material-ui/packages/mui-material/src/FilledInput/FilledInput.js

Lines 45 to 49 in 0b38955

	const light = theme.palette.mode === 'light';
	const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
	const backgroundColor = light ? 'rgba(0, 0, 0, 0.06)' : 'rgba(255, 255, 255, 0.09)';
	const hoverBackground = light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.13)';
	const disabledBackground = light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)';

and e.g.

material-ui/packages/mui-material/src/FilledInput/FilledInput.js

Line 52 in 0b38955

backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bg : backgroundColor,

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]

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]

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:

material-ui/packages/mui-material/src/FilledInput/FilledInput.js

Line 174 in 90f655a

WebkitBoxShadow: '0 0 0 100px #266798 inset',

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.

material-ui/packages/mui-material/src/MenuItem/MenuItem.js

Lines 84 to 86 in 90f655a

	backgroundColor: theme.vars
	? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})`
	: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),

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]

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.

[chbiel]

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]

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