Question

我要在材质UI TextField组件获得焦点时更改其边框颜色，而不使用包裹整个应用程序的主题。我在项目中使用样式化的组件和nextjs，而official documentation却无处不在。

我检查了TextField并尝试通过改进类直接应用更改。没有任何效果。

const StyledInput = styled(TextField)`
  width: 100%;
  &.MuiInputLabel-root.Mui-focused {
    color: white;
  }
`;

Answer 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边框颜色

1 个答案: