如何更改下拉选项的颜色？

Question

Any idea with this strange behaviour? When you open dropdown and select for example 'Option 3' then click 'OPTION' button(it sets value to be 'Option 1'), then open dropdown and you can see that 'Option 3' is red but it shouldnt be red, now Option 1 should be red because its selected. Any idea?

try the code here: https://codesandbox.io/s/material-ui-select-forked-5n1lpb?file=/src/material.js

code:

 import React, { useState } from "react"; import { MenuItem, makeStyles, Select, Button, FormControl, Box } from "@material-ui/core"; const useStyles = makeStyles((theme) => ({ select: { backgroundColor: "black", color: "white" }, menuItem: { "&.Mui-selected": { backgroundColor: "red", color: "white" } } })); export default function SimpleSelect() { const classes = useStyles(); const [value, setValue] = useState(""); const handleChange = (event) => { setValue(event.target.value); }; const handleButtonClick = () => { setValue("Option 1"); }; const data = [ { value: "Option 1" }, { value: "Option 2" }, { value: "Option 3" } ]; return ( <div> <Box> <FormControl style={{ display: "flex", flexDirection: "row" }}> <Select // className={classes.select} MenuProps={{ classes: { paper: classes.menuItem }, anchorOrigin: { vertical: "bottom", horizontal: "left" }, transformOrigin: { vertical: "top", horizontal: "left" }, getContentAnchorEl: null }} renderValue={() => <div>{value? value: "Polygon"}</div>} onChange={handleChange} > <MenuItem value="" style={{ marginTop: "1px" }}> <em>(No Selection)</em> </MenuItem> {data.map((option) => { return ( <MenuItem className={classes.select} value={option.value}> {option.value} </MenuItem> ); })} </Select> <Button onClick={handleButtonClick}>Option</Button> </FormControl> </Box> </div> ); }

Answer 1

value prop is missing for Select

<Select
  // ...
  value={value}
  // ...  
>
  {/* ... */}
</Select>