[解決済み] MUI TextFieldのボーダーカラーを変更する方法

質問

アウトライン化されたバリアントのアウトラインカラーを変更する方法がわかりません。 TextField

GitHub の issue を見て回ったところ、人々が指摘しているのは 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);

どのように解決するのですか？

Material-UIによって注入されたすべてのクラス名をオーバーライドできるのは classes プロパティのおかげで、Material-UIによって注入されたすべてのクラス名を上書きすることができます。 以下を見てください。 をクラスでオーバーライドする セクションと コンポーネントの実装 をご覧ください。

そして最後に :

Input ReactコンポーネントのAPIドキュメントです。プロパティやCSSのカスタマイズポイントについて詳しく解説しています。