Material UI change Input's active color

问题

How do I change the color of an active input? I'd like to change the default blue one but cant find how to.

From what I've tried it's not a matter of color attribute, neither in the FormControl, the InputLabel or the Input. Also there is no underlineStyle prop available (docs)

I'd like to change the color only when the input is active, that is to say the user is writing in it, to my primary color as defined in my theme.

I'm using Input and not TextField because I want to use InputAdornments as per https://material-ui-next.com/demos/text-fields/#input-adornments.

EDIT

It seems like I should change .MuiInput-inkbar-169:after's background-color. How do you suggest I do that? Is there another way?

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

Adding this to my style.css does not change anything, even trying with an !important

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

回答1:

Define some classes (pay attention to the green classes):

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',    
    },
  },
});

Add them as a classes prop using the withStyles HoC:

export default withStyles(styles)(ComposedTextField);

Override the classes used in the components with the classnames in the classes prop provided by withStyles:

  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 uses the theme's primary color in its inkbar and underline classes, so we override them with the greenInkbar and greenUnderline classes we've defined.

For InputLabel, which is a wrapper for FormLabel, we have to pass classes through via the FormControlClasses prop.

Take a look at this codesandbox for a working reproduction.

来源：https://stackoverflow.com/questions/47904859/material-ui-change-inputs-active-color

标签

javascript

reactjs

material-design

material-ui