material-ui
material-ui copied to clipboard
Add borderColor property to palate / use an existing one
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?