材质UI更改输入的活动颜色

Question

如何更改活动输入的颜色？我想更改默认的蓝色但不能找到如何。

从我的尝试来看，它不是color属性的问题，在FormControl，InputLabel或Input中都没有。也没有underlineStyle道具（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',    
    },
  },
});

使用classes将它们添加为withStyles HoC道具：

export default withStyles(styles)(ComposedTextField);

使用withStyles提供的classes prop中的类名重写组件中使用的类：

  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在其墨迹栏和下划线类中使用主题的主要颜色，因此我们使用我们定义的greenInkbar和greenUnderline类覆盖它们。

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

看一下这个codesandbox的工作复制品。