I have a select textview in my react app and I am wondering how to change the font color after selecting an item from this 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>
For example purposes, here is a demonstration that I have created.
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);
In this specific scenario, initially the font color appears as red when opening the dropdown list. However, upon selection of an item, the main label displays the selected item with a red font color which you want to appear as blue instead. How can this customization be achieved?