javascript - Material UI change Input's active color - Stack Overflow

admin管理员组

文章数量:1425786

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 .

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
}

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./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
}

• javascript
• reactjs
• material-design
• material-ui

Share Improve this question Follow edited Dec 20, 2017 at 11:47 ted asked Dec 20, 2017 at 11:21 tedted 14.8k1010 gold badges6868 silver badges113113 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

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 ponents 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.

本文标签： javascriptMaterial UI change Input39s active colorStack Overflow