打開時將 select 元素顏色更改為另一種顏色

Question

Material ui 的新功能，我有這個 select 元素，我想在單擊 select 時將圖像中該輸入的顏色更改為與“無”部分相同，因此當用戶能夠看到“無”部分時，該輸入上面它應該具有與“無”部分相同的背景顏色，然后當下拉菜單關閉時輸入應該變為灰色

https://codesandbox.io/s/material-demo-forked-6hs9mm?file=/demo.js

代碼：

 import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import InputLabel from '@material-ui/core/InputLabel'; import MenuItem from '@material-ui/core/MenuItem'; import FormControl from '@material-ui/core/FormControl'; import Select from '@material-ui/core/Select'; import Button from '@material-ui/core/Button'; const useStyles = makeStyles((theme) => ({ button: { display: 'block', marginTop: theme.spacing(2), }, formControl: { margin: theme.spacing(1), minWidth: 120, }, select: { borderBottom: 'opx', '& ul': { paddingTop: '0px', paddingBottom: '0px', }, '& ul:hover': { backgroundColor: '#1E2328', }, '&.Mui-selected': { backgroundColor: '#1E2328', color: '#E9ECEC', fontWeight: '400, regular', }, '&.Mui-selected:hover': { backgroundColor: '#1E2328', }, }, menuItemm: { display: 'flex', width: '225px', height: '56px', justifyContent: 'space-between', // border: '1px solid gray', backgroundColor: '#0B0B0B', color: 'white', }, placeholder: { color: '#E9ECEC', }, })); export default function ControlledOpenSelect() { const classes = useStyles(); const [age, setAge] = React.useState(''); const [open, setOpen] = React.useState(false); const handleChange = (event) => { setAge(event.target.value); }; const handleClose = () => { setOpen(false); }; const handleOpen = () => { setOpen(true); }; return ( <div> <FormControl className={classes.formControl}> <InputLabel style={{backgroundColor:"gray",color:"white"}} id="demo-controlled-open-select-label">Age</InputLabel> <Select labelId="demo-controlled-open-select-label" id="demo-controlled-open-select" style={{backgroundColor:"gray",color:"white"}} open={open} MenuProps={{ classes: { paper: classes.select }, anchorOrigin: { vertical: 'bottom', horizontal: 'left', }, transformOrigin: { vertical: 'top', horizontal: 'left', }, getContentAnchorEl: null, }} onClose={handleClose} onOpen={handleOpen} value={age} onChange={handleChange} > <MenuItem value=""> <em>None</em> </MenuItem> <MenuItem className={classes.menuItemm} value={10}>Ten</MenuItem> <MenuItem className={classes.menuItemm} value={20}>Twenty</MenuItem> <MenuItem className={classes.menuItemm} value={30}>Thirty</MenuItem> </Select> </FormControl> </div> ); }

當下拉菜單打開時，這兩個應該具有相同的顏色：

然后當下拉菜單關閉時，輸入應變為灰色（backgroundColor）。

我嘗試使用 usestate 但它在下拉菜單關閉后改變顏色，而不是在打開時改變顏色： https://codesandbox.io/s/material-demo-forked-2k0sow?file=/demo.js

英語不是我的母語所以可能會出錯

Answer 1

你應該改變這部分

<Select labelId="demo-controlled-open-select-label"
          id="demo-controlled-open-select"
          style={{
            backgroundColor: open ? "#1E2328" : "gray",
            color: "white"
          }}

這里是codesandbox鏈接https://codesandbox.io/s/material-demo-forked-exjez3?file=/demo.js

 import React from "react"; import { makeStyles } from "@material-ui/core/styles"; import InputLabel from "@material-ui/core/InputLabel"; import MenuItem from "@material-ui/core/MenuItem"; import FormControl from "@material-ui/core/FormControl"; import Select from "@material-ui/core/Select"; import Button from "@material-ui/core/Button"; const useStyles = makeStyles((theme) => ({ button: { display: "block", marginTop: theme.spacing(2) }, formControl: { margin: theme.spacing(1), minWidth: 120 }, select: { borderBottom: "opx", "& ul": { paddingTop: "0px", paddingBottom: "0px" }, "& ul:hover": { backgroundColor: "#1E2328" }, "&.Mui-selected": { backgroundColor: "#1E2328", color: "#E9ECEC", fontWeight: "400, regular" }, "&.Mui-selected:hover": { backgroundColor: "#1E2328" } }, menuItemm: { display: "flex", width: "225px", height: "56px", justifyContent: "space-between", // border: '1px solid gray', backgroundColor: "#0B0B0B", color: "white" }, placeholder: { color: "#E9ECEC" } })); export default function ControlledOpenSelect() { const classes = useStyles(); const [age, setAge] = React.useState(""); const [open, setOpen] = React.useState(false); const handleChange = (event) => { setAge(event.target.value); }; const handleClose = () => { setOpen(false); }; const handleOpen = () => { setOpen(true); }; return ( <div> <FormControl className={classes.formControl}> <InputLabel style={{ backgroundColor: "gray", color: "white" }} id="demo-controlled-open-select-label" > Age </InputLabel> <Select labelId="demo-controlled-open-select-label" id="demo-controlled-open-select" style={{ backgroundColor: open? "#1E2328": "gray", color: "white" }} open={open} MenuProps={{ classes: { paper: classes.select }, anchorOrigin: { vertical: "bottom", horizontal: "left" }, transformOrigin: { vertical: "top", horizontal: "left" }, getContentAnchorEl: null }} onClose={handleClose} onOpen={handleOpen} value={age} onChange={handleChange} > <MenuItem value=""> <em>None</em> </MenuItem> <MenuItem className={classes.menuItemm} value={10}> Ten </MenuItem> <MenuItem className={classes.menuItemm} value={20}> Twenty </MenuItem> <MenuItem className={classes.menuItemm} value={30}> Thirty </MenuItem> </Select> </FormControl> </div> ); }