Change border color of MUI disabled outline input

Question

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 ?

They have a standard style. Right click and inspect element to see exactly which class is setting the border — Matt, Mar 24 '22 at 10:36
That's what I did. Like described, but this give no results! Look at https://mui.com/material-ui/react-text-field/ the outline disabled input — TOPKAT, Mar 24 '22 at 10:37

score 5 · Accepted Answer · answered Mar 27 '22 at 16:32

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"
            }
        }
    }}
/>

score 2 · Answer 2 · answered Mar 24 '22 at 10:49

2

Add to your css file:

.MuiOutlinedInput-notchedOutline {
  border-color: red !important;
  border-width: 4px !important;
}

here is the output:

answered Mar 24 '22 at 10:49

free bug coding

224
2
7

1

Thanks a lot! Is there a way to do so in the theme variables ? – TOPKAT Mar 24 '22 at 10:52

score 2 · Answer 3 · answered Oct 28 '22 at 10:18

i wanted to change border colour on active and focused states and i had to disable hover on disabled component i solved it like this.

renderInput={(params) => (
            <TextField
              sx={{
                '& .MuiOutlinedInput-root': {
                  borderRadius: '7px',
                  height: 50,
                  border: '1px solid #909090',

                  ':hover': {
                    border: '0.5px solid #fd0000 !important',
                    boxShadow: '-1px 1px 4px 4px #FFEAEA'
                  },
                  ':focus-within': { border: '0.5px solid #fd0000 !important' }
                },
                '& .MuiOutlinedInput-root.Mui-disabled': {
                  ':hover': {
                    border: '1px solid #909090 !important',
                    boxShadow: 'none'
                  }
                },
                '& .MuiOutlinedInput-notchedOutline': {
                  border: 'none'
                }
              }}
              {...params}

score 0 · Answer 4 · answered Nov 30 '22 at 16:53

In my case, I need every TextInput to have a green border color.

So in my global styles I simply did:

const GlobalStyle = createGlobalStyle`
   
...SOME STYLES...
 
   * > & .Mui-focused {
        * > & .MuiOutlinedInput-notchedOutline {
                border-color: ${ColorsEnum.Green} !important;
        }
   }

`
export default GlobalStyle;

Change border color of MUI disabled outline input

4 Answers4