Reactjs 更改焦点上物料UI文本字段的样式，反应

我第一次学习材料界面。我想自定义材质UI的文本字段。我可以在未选中文本字段时更改其样式，在聚焦时无法更改其样式。我正在使用

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>
  );
}

从“React”导入React；
从“@material ui/core/Checkbox”导入复选框；
从“@material ui/core/TextField”导入TextField；
进口{
创造博物馆，
制作风格，
创建样式，
主题作为补充主题，
ThemeProvider
}来自“@material ui/core/styles”；
从“@material ui/core/colors”导入{橙色、蓝色、绿色}”；
const useStyles=makeStyles（主题=>
创建样式({
根目录：{
颜色：绿色[900]，
"梅艳芳":{
边框：“2件纯蓝”，
}
},
})
);
函数CustomCheckbox（）{
const classes=useStyles（）；
返回(
);
}
const theme=createMuiTheme({
});
导出默认函数CustomStyles（）{
返回(
);
}

问题：

---

如何更改焦点上文本字段的样式？非常感谢您的帮助

实际上，您可能需要的是设置

InputProps的类名

：

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

您可以在此处找到一个工作示例： 检查以下各项：

---

您可以在此处找到有关MUI在输入组件中使用的不同类的更多信息：

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

InputProps的类名：

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

您可以在此处找到一个工作示例：
检查以下各项：

您可以在此处找到有关MUI与输入组件一起使用的不同类的更多信息：
要自定义MUI文本字段
输入元素
的边框样式：

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
        }
      }
    }
  })
);

在线试用：



顺便提一下，公认的答案是：

要自定义MUI文本字段
输入元素
的边框样式：

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
        }
      }
    }
  })
);

在线试用：



顺便提一下，公认的答案是：

@keikai我有，它也有。仔细检查。哦，你说的是边框：）我按照你的要求更改了颜色（从绿色到红色）。有多种选择。您看到的边框（蓝色边框）来自字段集（而不是容器/输入）。我会在答案中加上这个。因为两个边界不一样，所以仍然不正确。你可以在那里看到大小的变化。请检查我的答案，如前所述，我将不胜感激-这取决于您要设置的边界。它可以是字段集（不是实际关注的项目）和输入（您当前关注的项目）。我建议OP知道它们之间的不同，并了解如何使用它们。@keikai我有，它有。仔细检查。哦，你说的是边框：）我按照你的要求更改了颜色（从绿色到红色）。有多种选择。您看到的边框（蓝色边框）来自字段集（而不是容器/输入）。我会在答案中加上这个。因为两个边界不一样，所以仍然不正确。你可以在那里看到大小的变化。请检查我的答案，如前所述，我将不胜感激-这取决于您要设置的边界。它可以是字段集（不是实际关注的项目）和输入（您当前关注的项目）。我建议OP了解它们之间的不同，并了解如何使用它们。