更改 MUI 禁用轮廓输入的边框颜色
Change border color of MUI disabled outline input
我真的很难找到这个边框颜色的定义位置。我检查了 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 />
,但它有同样的问题。你能帮帮我吗?
添加到您的 css 文件:
.MuiOutlinedInput-notchedOutline {
border-color: red !important;
border-width: 4px !important;
}
这是输出:
我是通过使用主题面板来做到这一点的。我正在使用 mui 5.5.0
import {createTheme} from "@mui/material";
const theme = createTheme({
palette: {
action: {
disabled: 'your color here e.g #000000',
}
},
});
通过这样做,整个应用程序中的每个禁用字段都将具有调色板中定义的颜色。
如果您想为 single/specific 输入字段执行此操作,或者您想覆盖此 palatte 禁用定义的颜色。您可以通过以下方式完成:
<TextField
value={value}
variant="outlined"
label="label"
disabled
sx={{
"& .MuiInputBase-root.Mui-disabled": {
"& > fieldset": {
borderColor: "your color here e.g #8cffcb"
}
}
}}
/>
我真的很难找到这个边框颜色的定义位置。我检查了 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 />
,但它有同样的问题。你能帮帮我吗?
添加到您的 css 文件:
.MuiOutlinedInput-notchedOutline {
border-color: red !important;
border-width: 4px !important;
}
这是输出:
我是通过使用主题面板来做到这一点的。我正在使用 mui 5.5.0
import {createTheme} from "@mui/material";
const theme = createTheme({
palette: {
action: {
disabled: 'your color here e.g #000000',
}
},
});
通过这样做,整个应用程序中的每个禁用字段都将具有调色板中定义的颜色。 如果您想为 single/specific 输入字段执行此操作,或者您想覆盖此 palatte 禁用定义的颜色。您可以通过以下方式完成:
<TextField
value={value}
variant="outlined"
label="label"
disabled
sx={{
"& .MuiInputBase-root.Mui-disabled": {
"& > fieldset": {
borderColor: "your color here e.g #8cffcb"
}
}
}}
/>