如何更改MUI TextField的边框颜色 [英] How to change the border color of MUI TextField

问题描述

我似乎想不出如何更改带轮廓的变体的轮廓颜色TextField

我查看了GitHub的问题，人们似乎倾向于使用TextField&Quot；InputProps&Quot；属性，但这似乎没有任何作用。

以下是我的代码的当前状态

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);

推荐答案

您可以覆盖Material-UI注入的所有类名，这要归功于classes属性。 有关更多详细信息，请参阅overriding with classes部分和implementation of the component。

最后：

The API documentation of the Input React component. Learn more about the properties and the CSS customization points.

这篇关于如何更改MUI TextField的边框颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！