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

IT技术 reactjs material-ui
2021-04-09 06:06:59

我在文档和其他 SO 问题中搜索了很多答案。

我createMuiTheme在单独的 JS 文件中使用该选项来覆盖某些默认样式，但我很难理解该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>
}}

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

4个回答

感谢鲁道夫·奥拉 (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'
            }
        }
    }
如此真实。我从 Semantic UI 开始，遇到了响应问题，但 Material UI 也让我头疼。
2021-06-17 06:06:59
'&:hover $notchedOutline'（即 $nottedOutline）是我需要的东西，谢谢！
2021-06-18 06:06:59
干得好！从 Material UI 文档中并不明显可以使用各种 CSS 选择器。
2021-06-21 06:06:59

要查找您可以更改的类名和 CSS 属性，组件 API 的文档显示了一个列表。

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

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

查看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属性之前，由于某种原因，输入的聚焦状态是白色的。
2021-06-16 06:06:59
@J.Jackson 我实际上尝试了另一种方法，withStyles用于包装元素，但这也不太奏效。您可能需要考虑创建自己的轮廓输入，OutlinedInput它是正确设置 NotchedOutline 样式的子类。我认为自定义组件可能是最好的选择。
2021-06-21 06:06:59

这在此处的文档中得到了很好的介绍。

单击标有“自定义 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它只改变标签颜色
2021-06-06 06:06:59

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

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

其它你可能感兴趣的问题
上一篇在 react.js 中实现 HTML 实体解码 下一篇我们可以将点击处理程序附加到自定义子组件吗