更改 MUI TextField 边框颜色
Posted
技术标签:
【中文标题】更改 MUI TextField 边框颜色【英文标题】:Change MUI TextField border-color 【发布时间】:2019-12-23 16:23:09 【问题描述】:我想更改材质 UI TextField
组件在获得焦点时的边框颜色,而不使用包装整个应用程序的主题。
我在我的项目中使用样式化组件和 nextjs,official documentation 没有领先任何地方。
我检查了 TextField 并尝试通过处理类来直接应用更改。没有任何影响。
const StyledInput = styled(TextField)`
width: 100%;
&.MuiInputLabel-root.Mui-focused
color: white;
`;
【问题讨论】:
【参考方案1】:答案取决于您使用的文本字段的变体。 如果您使用的是“标准”变体:
const StyledInput = styled(TextField)`
width: 100%;
& .MuiInput-underline::before
border-color: yellow !important;
& .MuiInput-underline::after
border-color: orange;
`;
如果您使用的是“轮廓”变体:
const StyledInput = styled(TextField)`
width: 100%;
& .MuiOutlinedInput-notchedOutline
border-color: red;
& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline
border-color: orange;
`;
你可以在https://codesandbox.io/s/material-demo-pu652?fontsize=14看到工作示例
【讨论】:
以上是关于更改 MUI TextField 边框颜色的主要内容,如果未能解决你的问题,请参考以下文章
Flutter - 如何更改 TextField 边框颜色?
如何在不更改 javafx 边框的情况下更改 TextField 的背景颜色?