Как изменить цвет шрифта после выбора элемента из текстового представления в Material-UI

Question

У меня есть выбранный текстовый вид в моем приложении реакции.Как изменить цвет шрифта после выбора элемента из этого текстового представления.

<div>
        <TextField
          id="standard-select-currency"
          select
          fullWidth
          label="Filter By"
          InputLabelProps={{
            shrink: true,
            style: { color: "#fff" }
          }}
          margin="normal"
          value={this.state.filter}
          onChange={this.handleChange("filter")}
        >
          {currencies.map(option => (
            <MenuItem
              key={option.value}
              value={option.value}
              selected
              classes={{ selected: classes.selected }}
            >
              {<div style={divStyle}>{option.label}</div>}
            </MenuItem>
          ))}
        </TextField>
      </div>

Это пример , который я создал для этого случая.

import React from "react";
import Button from "@material-ui/core/Button";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const homePageStyle = theme => ({
  root: {
    width: "300px"
  },
  selected: {
    backgroundColor: "turquoise !important",
    color: "white",
    fontWeight: 600
  }
});

const divStyle = {
  color: "red"
};

const listStyle = {
  color: "black"
};

const currencies = [
  {
    value: "USD value",
    label: "usd label"
  },
  {
    value: "EUR value",
    label: "eur label"
  },
  {
    value: "BTC value",
    label: "btc label"
  },
  {
    value: "JPY value",
    label: "jpy label"
  }
];

class SimpleMenu extends React.Component {
  state = {
    anchorEl: null,
    filter: ""
  };

  handleClick = event => {
    this.setState({ anchorEl: event.currentTarget });
  };

  handleClose = () => {
    this.setState({ anchorEl: null });
  };

  handleChange = name => event => {
    this.setState({ [name]: event.target.value });
    console.log(name + "   " + event.target.value);
  };

  render() {
    const { anchorEl } = this.state;
    const { classes } = this.props;

    return (
      <div>
        <TextField
          id="standard-select-currency"
          select
          fullWidth
          label="Filter By"
          InputLabelProps={{
            shrink: true,
            style: { color: "#fff" }
          }}
          margin="normal"
          value={this.state.filter}
          onChange={this.handleChange("filter")}
        >
          {currencies.map(option => (
            <MenuItem
              key={option.value}
              value={option.value}
              selected
              classes={{ selected: classes.selected }}
            >
              {<div style={divStyle}>{option.label}</div>}
            </MenuItem>
          ))}
        </TextField>
      </div>
    );
  }
}

export default withStyles(homePageStyle)(SimpleMenu);

В этом примере вы можете видеть, что цвет шрифта весь красный, когда я открываювыпадающий список.После того, как я выбрал предмет.Основная метка показывает элемент, который я выбрал красным шрифтом.Тем не менее, я хочу, чтобы основной ярлык показывался синим цветомКак этого добиться?

Answer 1

Я нашел решение.Просто добавьте

InputProps={{
            classes: {
                input: classes.input
            }
        }}

в текстовое поле и установите нужный цвет в classes.input.Таким образом, TextField будет выглядеть как

<TextField
          id="standard-select-currency"
          select
          fullWidth
          label="Filter By"
          InputLabelProps={{
            shrink: true,
            style: { color: "#fff" }
          }}
          InputProps={{
            classes: {
                input: classes.input
            }
        }}
          margin="normal"
          value={this.state.filter}
          onChange={this.handleChange("filter")}
        >

, а homePageStyle будет иметь значение

const homePageStyle = theme => ({
  root: {
    width: "300px"
  },
  selected: {
    backgroundColor: "turquoise !important",
    color: "white",
    fontWeight: 600
  },
  input:{
    color: "blue",
  }
});

Наконец, удалите style={divStyle} Если нет, он будет отображать только этот стиль.

Answer 2

Я не реактивный парень, но вы хотели бы попробовать некоторые CSS, например,

<select>
    <option>Select</option>
    <option selected>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>

и css as

select { 
    color: black;
    background: red; 
   }
option:not(:checked) { 
      background: green;
 }

Вот одна из скрипок, которую стоит попробовать