材質UI更改輸入的活動顏色

Question

如何更改活動輸入的顏色？ 我想更改默認的藍色但不能找到如何。

從我嘗試過的不是color屬性的問題，在FormControl，InputLabel或Input中也是如此。 此外，沒有可用的underlineStyle道具（ docs ）

我想僅在輸入處於活動狀態時（也就是用戶正在寫入）中更改顏色，改為我的theme定義的primary顏色。

我使用的是Input而不是TextField因為我想根據https://material-ui-next.com/demos/text-fields/#input-adornments使用InputAdornments 。

編輯

好像我應該改變.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',    
    },
  },
});

使用withStyles HoC將它們添加為classes prop：

export default withStyles(styles)(ComposedTextField);

使用withStyles提供的classes prop中的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傳遞類。

看一下這個代碼盒就可以進行復制。