javascript - Material UI 更改输入的事件颜色

Question

如何更改事件输入的颜色？我想更改默认的蓝色，但找不到如何更改的方法。

根据我的尝试，这不是 color 的问题属性，既不在 FormControl、InputLabel 中，也不在 Input 中。也没有 underlineStyle Prop 可用 ( docs )

我只想在输入处于事件状态时更改颜色，也就是说用户正在输入我的 primary我的 theme 中定义的颜色.

我正在使用 Input而不是 TextField因为我想用 InputAdornments根据 https://material-ui-next.com/demos/text-fields/#input-adornments .

编辑

看来我应该改.MuiInput-inkbar-169:after的 background-color .你建议我怎么做？还有别的办法吗？

/* eslint-disable flowtype/require-valid-file-annotation */

import React from 'react';
import { withStyles } from 'material-ui/styles';
import Input, { InputLabel } from 'material-ui/Input';
import { FormControl } from 'material-ui/Form';

const styles = theme => ({
    formControl: {
        margin: theme.spacing.unit,
        width: '100%',
    },
    textField: {
        marginLeft: theme.spacing.unit,
        marginRight: theme.spacing.unit,
    }
});

class CustomInput extends React.Component {

    ...

    render() {
        const { classes, label, id } = this.props;
        const error = (this.props.valid === undefined ? false : !this.props.valid) && this.state.visited
        return (
            <FormControl className={classes.formControl} >
                <InputLabel error={error}>{label}</InputLabel>
                <Input
                    id={id}
                    className={classes.textField}
                    value={this.state.value || ''}
                    endAdornment={this.props.endAdornment ?
                        <InputAdornment position="end">
                            {this.props.endAdornment}
                        </InputAdornment> : ''
                    }
                />
            </FormControl>
        );
    }
}

CustomInput.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(CustomInput);

将此添加到我的 style.css不会改变任何东西，即使尝试使用 !important

.MuiInput-inkbar-169:after {
  background-color: #3f51b5 !important
}

Answer 1

定义一些类(注意绿色类):

const styles = theme => ({
  container: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  formControl: {
    margin: theme.spacing.unit,
  },
  greenLabel: {
    color: '#0f0',
  },
  greenUnderline: {
    '&:hover:not($disabled):before': {
      backgroundColor: '#040',    
    },
  },
  greenInkbar: {
    '&:after': {
      backgroundColor: '#0f0',    
    },
  },
});

使用 withStyles HoC 将它们添加为 classes Prop :

export default withStyles(styles)(ComposedTextField);

使用 withStyles 提供的 classes 属性中的类名覆盖组件中使用的类:

  render() {
    const { classes } = this.props;
    return (
      <div className={classes.container}>
        <FormControl className={classes.formControl}>
          <InputLabel FormControlClasses={{ focused: classes.greenLabel }} htmlFor="name-simple">
            Name
          </InputLabel>
          <Input
            classes={{ inkbar: classes.greenInkbar, underline: classes.greenUnderline }}
            id="name-simple"
            value={this.state.name}
            onChange={this.handleChange}
          />
        </FormControl>
      </div>
    );

Input在其 inkbar 和 underline 类中使用主题的主要颜色，因此我们使用我们定义的 greenInkbar 和 greenUnderline 类覆盖它们。

对于 InputLabel ，它是 FormLabel 的包装器，我们必须通过 FormControlClasses 属性传递类。

看看这个codesandbox用于工作复制。