material-ui icon indicating copy to clipboard operation
material-ui copied to clipboard

Add borderColor property to palate / use an existing one

Open Baribj opened this issue 2 years ago • 0 comments

Duplicates

  • [X] I have searched the existing issues

Latest version

  • [X] I have tested the latest version

Summary 💡

Currently, components like OutlinedInput use hard-coded border-color values. This makes it very inconvenient to set a border color for all inputs in a custom theme:

 theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';

Adding a borderColor property in theme would make it much more easier to handle all border colors of all MUI components at once when using a custom theme.

Examples 🌈

No response

Motivation 🔦

I am using a custom theme with a custom color for the "palette.divider", which I use a lot as borderColor: divider.

I ran into a lot of trouble when I tried to match colors of my inputs to my dividers and borders of other elements. Setting sx={{borderColor: divider}} on every textField input is inconvenient.

I imagine the same would apply to all other components that might have borders?

Baribj avatar Dec 10 '22 17:12 Baribj