javascript - 如何在 Material-UI 的 TextView 中选择元素后更改字体颜色

Question

我的 React 应用程序中有一个选择 TextView 。从此 TextView 中选择元素后如何更改字体颜色。

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

这是一个 example我为这个案例创建了。

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

我不是一个 React 的人，但你想尝试一些 css，例如

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

和CSS作为

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

Here is some one fiddle to try