更改 MUI TextField 边框颜色

Posted 2023-02-22

【中文标题】更改 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看到工作示例