如何在悬停时更改 Material-UI TextField 边框、文本颜色和边框颜色答案

【问题标题】：How to change Material-UI TextFiled's border, text color and border color on hover如何在悬停时更改 Material-UI TextField 边框、文本颜色和边框颜色
【发布时间】：2020-12-05 01:35:10
【问题描述】：

我不完全了解如何自定义 MaterialUI 组件。通读 dos https://material-ui.com/customization/components/ 后，我了解如何使用 classes 和 className 进行自定义。我不懂高级技术 - 真的很混乱。

这是我在codesandbox 上找到的关于自定义TextFields https://codesandbox.io/s/6rx8p?file=/demo.tsx:842-858的示例

例如

const CssTextField = withStyles({
  root: {
    '& label.Mui-focused': {
      color: 'green',
    },
    '& .MuiInput-underline:after': {
      borderBottomColor: 'green',
    },
    '& .MuiOutlinedInput-root': {
      '& fieldset': {
        borderColor: 'red',
      },
      '&:hover fieldset': {
        borderColor: 'yellow',
      },
      '&.Mui-focused fieldset': {
        borderColor: 'green',
      },
    },
  },
})(TextField);

从上面的例子中，fieldset 属性在哪里。我在文档中找不到关于道具fieldset 的任何地方。即使浏览 Chrome 开发工具，我也看不到这个属性的来源。

你如何确定哪个属性做什么。有没有简单的方法可以通过一些例子来理解这一点。

有教程可以看吗？

【问题讨论】：

标签： reactjs material-ui jss

【解决方案1】：

fieldset 不是 TextFields 的属性，而是来自其他组件的 html 标签。如果您查看 Chrome 开发工具，您可以找到带有一些 css 类的 <fieldset>。

TextFields 由其他较小的组件组成，您可以查看text-fields - components。 fieldset 来自于小组件OutlinedInput。它具有全局 CSS 类 MuiOutlinedInput-notchedOutline，您可以在 css list 找到它。

你可以在 github 上查看 OutlinedInput implementation.fieldset 来自 NotchedOutline.js。

正如您所说，文档中没有明确说明。它没有列出组成给定组件的标记元素。它需要我进行一些调查才能更深入地了解它的结构。

【讨论】：

【解决方案2】：

其实你可以使用material-ui/core提供的TextFieldprops：-

InputLabelProps：在标签上应用styles
InputProps：将styles 应用于输入本身

这是一个例子：-

import React, { useState } from 'react'
import { makeStyles } from '@material-ui/core/styles'
import { FormGroup, TextField } from '@material-ui/core'

const Demo = () => {
  const classes = useStyles()
  const [name, setName] = useState('')
  
  return (
    <FormGroup>
      <TextField 
        label="Name"
        variant="outlined"
        value={name}
        onChange={(e) => setName(e.target.value)} 
        required
        InputLabelProps={{
          classes: {
            root: classes.textFieldLabel,
            focused: classes.textFieldLabelFocused
          }
        }}
        InputProps={{
          classes: {
            root: classes.textFieldRoot,
            focused: classes.textFieldFocused,
            notchedOutline: classes.textFieldNotchedOutline
          }
        }}
      />
    </FormGroup>
  )
}

export default Demo

const useStyles = makeStyles(theme => ({
  textFieldLabel: {
    // this will be applied when input focused (label color change)
    "&$textFieldLabelFocused": {
      color: theme.palette.secondary.main
    }
  },
  textFieldLabelFocused: {},
  textFieldRoot: {
    // this will be applied when hovered (input text color change)
    "&:hover": {
      color: theme.palette.secondary.main,
    },
    // this will applied when hovered (input border color change)
    "&:hover $textFieldNotchedOutline": {
      borderColor: theme.palette.secondary.main
    },
    // this will be applied when focused (input border color change)
    "&$textFieldFocused $textFieldNotchedOutline": {
      borderColor: theme.palette.secondary.main
    }
  },
  textFieldFocused: {},
  textFieldNotchedOutline: {}
}));

你可以在这个工作的sandbox这里看到它

【讨论】：