在焦点、反应上更改 Material-UI 文本字段的样式

Posted 2023-02-22

【中文标题】在焦点、反应上更改 Material-UI 文本字段的样式

【英文标题】：Change style of Material-UI Textfield on Focus, React

【发布时间】：2020-08-08 09:07:03

【问题描述】：

我是第一次学习 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 的样式？帮助将不胜感激

【参考方案1】：

自定义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

---

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

【参考方案2】：

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

<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 与 Input 组件一起使用的不同类的更多信息：https://material-ui.com/api/input/#css

【讨论】：

那里有多个选项。您看到的边框（蓝色的）来自字段集（而不是来自容器/输入）。我会把这个添加到答案中。

这仍然不正确，因为两个边界不一样。你可以在那里看到大小的变化。请检查我的答案将不胜感激

如前所述 - 这取决于您要设置的边框。它可以是字段集（不是实际关注的项目）和输入（这是您当前关注的项目）。我建议 OP 了解它们之间的区别并了解如何使用它们。

@Dekel 。非常感谢您的回答。这解决了我的问题，但我仍然很困惑。而不是“&.Mui-focused”，我尝试了不同的东西，比如“&$focused”，但没有任何效果。我敢肯定我在这里遗漏了很多东西。我在哪里可以找到有关“Mui-focused”的更多信息？你能指导我吗