如何更改 MUI TextField 的边框颜色

Question

我似乎无法弄清楚如何更改轮廓变体的轮廓颜色 TextField

我查看了 GitHub 问题，人们似乎指向使用 TextField “InputProps” 属性，但这似乎无济于事。

这是我当前状态的代码

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

const styles = theme => ({
  field: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit,
    height: '30px !important'
  },
});

class _Field extends React.Component {
      render() {
          const { classes, fieldProps } = this.props;
             return (
                <TextField
                {...fieldProps}
                label={this.props.label || "<Un-labeled>"}
                InputLabelProps={{ shrink: true }} // stop from animating.
                inputProps={{ className: classes.fieldInput }}
                className={classes.field}
                margin="dense"
               variant="outlined"
            />
        );
    }
}

_Field.propTypes = {
    label: PropTypes.string,
    fieldProps: PropTypes.object,
    classes: PropTypes.object.isRequired
}

export default withStyles(styles)(_Field);

原文由 kinger6621 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

借助 classes 属性，您可以覆盖 Material-UI 注入的所有类名。查看 覆盖类 部分和 组件的实现以 获取更多详细信息。

最后：

Input React 组件的 API 文档。了解有关属性和 CSS 自定义点的更多信息。

原文由 amin khademian 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

https://codesandbox.io/s/6rx8p

 <CssTextField
  label="Username"
  className="username"
  name="username"
  onChange={this.onChange}
  type="text"
  autoComplete="current-password"
  margin="normal"
  inputProps={{ style: { fontFamily: 'nunito', color: 'white' } }}
/>

 //declare the const and add the material UI style
const CssTextField = withStyles({
  root: {
    '& label.Mui-focused': {
      color: 'white',
    },
    '& .MuiInput-underline:after': {
      borderBottomColor: 'yellow',
    },
    '& .MuiOutlinedInput-root': {
      '& fieldset': {
        borderColor: 'white',
      },
      '&:hover fieldset': {
        borderColor: 'white',
      },
      '&.Mui-focused fieldset': {
        borderColor: 'yellow',
      },
    },
  },
})(TextField);

原文由 Jojo Joseph 发布，翻译遵循 CC BY-SA 4.0 许可协议