Question

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

从我的尝试来看，它不是color属性的问题，也不是FormControl，InputLabel或Input。此外，没有underlineStyle道具可用（docs）

我想仅在输入处于活动状态时更改颜色，也就是说用户正在写入颜色，改为我的primary中定义的theme颜色。

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

修改

好像我应该更改.MuiInput-inkbar-169:after的{{1}}。你怎么建议我这样做？还有另一种方式吗？

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

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道具

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

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

看看这个codesandbox进行复制。

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

1 个答案: