更改 MUI 禁用轮廓输入的边框颜色

Question

我真的很难找到定义此边框颜色的位置。 我已经检查了 dom，但在任何输入组件或其伪元素中都没有看到边框样式...

我只是想减轻输入边框的颜色以匹配我的主题禁用颜色。

这是我使用的代码和渲染。

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

我试过使用<TextField />但它有同样的问题。 请问你能帮帮我吗？

Answer 1

我已经通过使用主题 palatte 完成了这项工作。 我正在使用 mui 5.5.0

import {createTheme} from "@mui/material"; 
const theme = createTheme({
    palette: {
        action: {
            disabled: 'your color here e.g #000000',
        }
    },
});

通过这样做，整个应用程序中的每个禁用字段都将具有调色板中定义的颜色。 如果您想对单个/特定输入字段执行此操作，或者您想覆盖此 palatte 禁用的定义颜色。 你可以通过以下方式做到这一点：

<TextField
    value={value}
    variant="outlined"
    label="label"
    disabled
    sx={{
        "& .MuiInputBase-root.Mui-disabled": {
            "& > fieldset": {
                borderColor: "your color here e.g #8cffcb"
            }
        }
    }}
/>

Answer 2

添加到您的 css 文件：

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

这是 output：

Answer 3

我想更改活动状态和聚焦状态的边框颜色，我不得不禁用禁用组件上的 hover 我这样解决了。

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}

Answer 4

就我而言，我需要每个 TextInput 都具有绿色边框颜色。

所以在我的全局 styles 中，我只是做了：

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

`
export default GlobalStyle;