更改 MUI TextField 边框颜色

Question

我想在不使用包装整个应用程序的主题的情况下在获得焦点时更改材质 UI

TextField

组件的边框颜色。 我在我的项目中使用样式化组件和 nextjs，并且官方文档没有领先任何地方。

我检查了 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

查看工作示例

Answer 2

我

mport React from "react";
import TextField from "@material-ui/core/TextField";
import styled from "styled-components";

//use this with variant="outlined"
const StyledInput = styled(TextField)
  width: 100%;
  & .MuiOutlinedInput-notchedOutline {
    border-color: red;
  }
  & .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
    border-color: orange;
  }
`;



export default function OutlinedTextFields() {
  return (
    <form noValidate autoComplete="off">
      <StyledInput
        id="outlined-name"
        label="Name"
        value="test"
        margin="normal"
        variant="outlined" //use with first styled input
        // variant="standard" //use with second styled input
      />
    </form>
  );
}