0
222
ViewsChange border color of MUI disabled outline input
I am really struggling to find where this border color is defined. I have inspected the dom but see no border style in any of the input component nor its pseudo elements...
I simply want to lighten the color of the input border to match my theme disabled color.
Here is the code I used and the render.
<OutlinedInput
size='small'
disabled={disabled}
value={value}
endAdornment={<InputAdornment position="end">{ctx.user.currency.short}</InputAdornment>}
inputProps={{ style: { paddingBottom: 4, } }}
style={{ fontWeight: 700, fontSize: 18 }}
{...props}
/>
I have tried using <TextField /> but it has the same problem. Could you help me please ?
·
Juan Pablo Isaza
2 answers
Answer question0
I have done this by using the theme palatte. I am using mui 5.5.0
import {createTheme} from "@mui/material";
const theme = createTheme({
palette: {
action: {
disabled: 'your color here e.g #000000',
}
},
});
By doing this, every disabled field through out the app will have the color defined in the palatte. And if you want to do this for a single/specific input field or you want to override this palatte disabled defined color. you can do it by following:
<TextField
value={value}
variant="outlined"
label="label"
disabled
sx={{
"& .MuiInputBase-root.Mui-disabled": {
"& > fieldset": {
borderColor: "your color here e.g #8cffcb"
}
}
}}
/>
·
Juan Pablo Isaza
Report
0
Add to your css file:
.MuiOutlinedInput-notchedOutline {
border-color: red !important;
border-width: 4px !important;
}
here is the output:
·
Juan Pablo Isaza
Report
Answer question