如何更改禁用的MUI TextField文本颜色？
如何更改禁用的MUI TextField文本颜色？
提问于 2022-11-11 13:54:32
在禁用的TextField中，我将使用黑色的文本颜色，而不是默认的灰色，基于以下内容：https://stackoverflow.com/a/70943025/239219
<TextField
id="outlined-basic"
value={'https://git.responsive.software/my-app.git'}
fullWidth
size="small"
disabled
variant="filled"
inputProps={{ style: { color: 'black' } }}
/>但是，当它被选中时，它会给文本颜色。我需要黑色也为未选定的文本。
这也是有趣的，为什么我的尝试不起作用。我猜MUI在他们的自定义解决方案后面使用了一个textfield。那么，为什么传递的color属性不像普通css中那样改变属性呢？
回答 1
Stack Overflow用户
发布于 2022-11-11 20:08:54
如果是disabled=true，您可以特别添加一个样式。如下所示：
// STYLES
export const StyledTextField = styled(TextField, {
shouldForwardProp: (props) => props !== 'disabled',
})<{ disabled: boolean }>(({ disabled }) => ({
color: disabled : 'black' ? 'pink',
}));
// IN THE COMPONENT
<StyledTextField
id="outlined-basic"
value={'https://git.responsive.software/my-app.git'}
fullWidth
size="small"
disabled
variant="filled"
inputProps={{ style: { color: 'black' } }}
/>(shouldForwardProp确保禁用的道具不会添加到DOM中)
或者..。
TextField没有特定的禁用类，但是如果您可以将代码改为使用InputBase，则可以使用禁用的类。当组件中的disabled=true应用时，将应用此CSS。https://mui.com/material-ui/api/input-base/#css
import { inputBaseClasses } from '@mui/material';
...
[`&.${inputBaseClasses.disabled}`]: {
color: 'black',
},页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74403523
复制相关文章
相似问题
腾讯云开发者
