在 Focus、React 上更改 Material-UI Textfield 的样式

Question

我是第一次学习Material-UI。我想自定义材质UI的TextField。当未选择文本字段时，我能够更改其样式，当它获得焦点时，我无法更改其样式。我正在使用ThemeProvider将样式注入到组件中。我已经尝试过这段代码

import React from "react";
import Checkbox from "@material-ui/core/Checkbox";
import TextField from "@material-ui/core/TextField";

import {
  createMuiTheme,
  makeStyles,
  createStyles,
  Theme as AugmentedTheme,
  ThemeProvider
} from "@material-ui/core/styles";
import { orange, blue, green } from "@material-ui/core/colors";

const useStyles = makeStyles(theme =>
  createStyles({
    root: {
      color: green[900],
      "&.Mui-focused": {
        border:"2px solid blue",
    }
    },

  })
);

function CustomCheckbox() {
  const classes = useStyles();

  return (
    <TextField
    variant='outlined'
    classes={{
      root:classes.root,
    }}      
    />
  );
}
const theme = createMuiTheme({
});

export default function CustomStyles() {
  return (
    <ThemeProvider theme={theme}>
      <CustomCheckbox />
    </ThemeProvider>
  );
}

问题：
如何更改焦点上 TextField 的样式？如有帮助，将不胜感激

Answer 1

实际上您可能想要设置的是InputProps：

<TextField variant="outlined" InputProps={{ className: classes.root }} />

如果您还想删除字段集的边框（或仅控制该边框），您可以这样设置：

const useStyles = makeStyles(theme =>
  createStyles({
    root: {
      color: green[900],
      "&.Mui-focused": {
        border: "2px solid red",
        '& .MuiOutlinedInput-notchedOutline': {
          border: 'none'
        }
      }
    }
  })
);

您可以在这里找到一个工作示例：检查以下内容： https: //codesandbox.io/s/style-text-field-htbem ?file=/src/App.js

您可以在此处找到有关 MUI 与输入组件一起使用的不同类的更多信息： https: //material-ui.com/api/input/#css

Answer 2

自定义MUI TextField input element的边框样式：

const useStyles = makeStyles(theme =>
  createStyles({
    root: {
      color: green[900],
      "& .MuiOutlinedInput-root": {
        "& fieldset": {
          borderColor: "rgba(0, 0, 0, 0.23)"  // default
        },
        "&.Mui-focused fieldset": {
          border: "2px solid red"             // focus
        }
      }
    }
  })
);

在线尝试： https: //codesandbox.io/s/style-text-field-3unyl

顺便说一下，接受的答案：