材质UI更改输入的活动颜色 [英] 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.

根据我的尝试，FormControl，InputLabel或Input中的color属性都不是问题.也没有可用的underlineStyle道具(文档)

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)

我只想在输入处于活动状态时(即用户正在用它输入)将颜色更改为我的theme中定义的我的primary颜色.

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.

我使用的是Input而不是TextField，因为我想按照

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.

编辑

似乎我应该更改.MuiInput-inkbar-169:after的background-color.您如何建议我这样做?还有另一种方法吗?

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

将此内容添加到我的style.css不会更改任何内容，即使尝试使用!important

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

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

推荐答案

定义一些类(注意 green 类):

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

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

export default withStyles(styles)(ComposedTextField);

使用withStyles提供的classes道具中的类名覆盖组件中使用的类:

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

输入在其墨水栏和下划线类中使用主题的原色，因此我们用定义的greenInkbar和greenUnderline类覆盖它们.

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.

对于 InputLabel ，它是 FormLabel ，我们必须通过FormControlClasses道具来传递类.

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

看看这个 codesandbox 可以正常复制.

Take a look at this codesandbox for a working reproduction.

这篇关于材质UI更改输入的活动颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！