如何更改 Material UI React 输入组件的轮廓颜色？

Posted 2023-02-22

【中文标题】如何更改 Material UI React 输入组件的轮廓颜色？

【英文标题】：How to change outline color of Material UI React input component?

【发布时间】：2019-05-14 20:00:00

【问题描述】：

我已经在文档和其他 SO 问题中搜索了高低的答案。

我在单独的 JS 文件中使用 createMuiTheme 选项来覆盖某些默认样式，但我很难理解 overrides 选项的工作原理。

目前我的按钮如下所示： 到目前为止，我必须得到的代码如下所示：

const theme = createMuiTheme(
    ...other code,
    overrides: 
    MuiFormControlLabel: 
        focused: 
            color: '#4A90E2'
        
    ,
    MuiOutlinedInput: 
        focused: 
                border: '1px solid #4A90E2'
        ,
        notchedOutline: 
            border: '1px solid #4A90E2'
        ,
    ,
    MuiFormLabel: 
        focused: 
            color: '1px solid #4A90E2'
        
    

);

然后在我的组件中，我就是这样使用它的：

import theme from './styles/ThemeStyles';
import  withStyles  from '@material-ui/core/styles';

class SignInForm extends Component 
render() 
    const  classes  = this.props;
    <form className=classes.container noValidate autoComplete='off'>
        <TextField
            id="outlined-email-input"
            label="Email"
            className=classes.textField
            type="email"
            name="email"
            autoComplete="email"
            margin="normal"
            variant="outlined"
        />
    </form>

我的问题是，我缺少什么让我的组件看起来如此时髦？以及以后如何知道 ThemeProvider 的 overrides 选项中的目标是什么，以免遇到类似情况？

【问题讨论】：

我回答了这个问题，但您可能想使用 Material UI 提交一个错误，我认为他们没有刻意为各种状态通过轮廓输入传递的轮廓特定样式.

看来他们现在可能已经修复了文档...见answer below。

【参考方案1】：

感谢 Rudolf Olah 的帮助并为我指明了正确的方向！我能够使用以下代码解决问题：

overrides: 
    MuiOutlinedInput: 
        root: 
            position: 'relative',
            '& $notchedOutline': 
                borderColor: 'rgba(0, 0, 0, 0.23)',
            ,
            '&:hover:not($disabled):not($focused):not($error) $notchedOutline': 
                borderColor: '#4A90E2',
                // Reset on touch devices, it doesn't add specificity
                '@media (hover: none)': 
                    borderColor: 'rgba(0, 0, 0, 0.23)',
                ,
            ,
            '&$focused $notchedOutline': 
                borderColor: '#4A90E2',
                borderWidth: 1,
            ,
        ,
    ,
    MuiFormLabel: 
        root: 
            '&$focused': 
                color: '#4A90E2'
            
        
    

【讨论】：

干得好！从 Material UI 文档中并没有明显看出可以使用各种 CSS 选择器。

确实如此。我从 Semantic UI 开始，遇到了响应性问题，但 Material UI 让我很头疼。

'&:hover $notchedOutline'（即 $notchedOutline）是我需要的东西，谢谢！

【参考方案2】：

要查找可以更改的类名和 CSS 属性，the documentation for the Component API shows a list。

TextField 是一个特例，因为它组合并呈现多个子组件，它允许您将 CSS 属性传递给 Input 组件和 FormHelperText 组件。

而OutlinedInput 是一个非常特殊的情况，因为它实际上将NotchedInput 用于具有自己的CSS 属性的输入元素。

查看code for the OutlinedInput，您可以看到正在使用的子选择器：

root: 
  position: 'relative',
  '& $notchedOutline': 
    borderColor,
,
// ...

看起来问题是 OutlinedInput 没有正确设置 NotchedOutline 的样式

你可能会有一些运气：

const theme = createMuiTheme(
  // ...other code,
  overrides: 
    // ...
    MuiOutlinedInput: 
      focused: 
        border: '1px solid #4A90E2'
      ,
      '& $notchedOutline': 
        border: '1px solid #4A90E2'
      ,
    ,
    // ...
  
);

【讨论】：

我很欣赏这个非常好的和彻底的答案！不幸的是，我在原始帖子中包含的图像的输入样式似乎没有任何变化。我想知道我是否可能有其他样式以某种方式覆盖它？我知道在我能够给它一个蓝色边框并使用overrides 属性之前，输入的焦点状态由于某种原因是白色的。

@J.Jackson 我实际上尝试了另一种方法，使用withStyles 来包装元素，但这也不太奏效。您可能需要考虑创建自己的轮廓输入，它是 OutlinedInput 的子类，可以正确设置 notchedOutline 的样式。我认为自定义组件可能是最好的选择。

【参考方案3】：

here 的文档很好地介绍了这一点。

在标有“自定义 CSS”的字段内单击以查看演示。

以下是使用您原来的 TextField 组件的方法：

import React from 'react'
import PropTypes from 'prop-types'
import  withStyles  from '@material-ui/core/styles'
import TextField from '@material-ui/core/TextField'

const styles = theme => (
  textField: 
    marginLeft: theme.spacing.unit * 3,
    marginBottom: '0px',
  ,
  label: 
    '&$focused': 
      color: '#4A90E2'
    ,
  ,
  focused: ,
  outlinedInput: 
    '&$focused $notchedOutline': 
      border: '1px solid #4A90E2'
    ,
  ,
  notchedOutline: ,
)

const CustomOutline = (classes) => (
  <TextField
    id="outlined-email-input"
    label="Email"
    className=classes.textField
    type="email"
    name="email"
    autoComplete="email"
    margin="normal"
    variant="outlined"
    InputLabelProps=
      classes: 
        root: classes.label,
        focused: classes.focused,
      ,
    
    InputProps=
      classes: 
        root: classes.outlinedInput,
        focused: classes.focused,
        notchedOutline: classes.notchedOutline,
      ,
    
  />
)

CustomOutline.propTypes = 
  classes: PropTypes.object.isRequired,


export default withStyles(styles)(CustomOutline)

【讨论】：

如何在自动完成中实现这一点。 codesandbox.io/s/tfgz5它只会改变标签颜色

【参考方案4】：

我在这里找到了解决方案：框架的作者在文档中并没有真正涵盖这一点。

https://github.com/mui-org/material-ui/issues/13557