更改 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 边框颜色的主要内容,如果未能解决你的问题,请参考以下文章

Material Ui TextField如何更改边框颜色

Flutter - 如何更改 TextField 边框颜色?

如何在不更改 javafx 边框的情况下更改 TextField 的背景颜色?

UITextField 边框颜色

仅在启用 darkTheme 时将边框颜色应用于 TextField

如何使用选择属性更改 TextField 的 MUI 菜单弹出框的背景颜色?