我正在使用SELECT组件,并希望定制第一个menuItem默认背景 colored颜色 ,但我找不到相应的类,因为如果我们单击Inspect,背景 colored颜色 就会被删除.

Steps to reproduce:

1.点击 Select .

2.在第一个menuItem中,应用默认背景.

3.点击鼠标右键查看.

4.第一个menuItem中的背景色正在消失,因此无法判断或更新背景色.

Expected:

第一个menuItem的背景 colored颜色 应该是可自定义的.

Attached image for reference enter image description here

import * as React from 'react';
import Box from '@mui/material/Box';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select, { SelectChangeEvent } from '@mui/material/Select';

export default function BasicSelect() {
  const [age, setAge] = React.useState('');

  const handleChange = (event: SelectChangeEvent) => {
    setAge(event.target.value as string);
  };

  return (
    <Box sx={{ minWidth: 120 }}>
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          label="Age"
          onChange={handleChange}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </Box>
  );
}

推荐答案

假设您想要使用styled个组件,您可以只覆盖 Select 器.例如:

const StyledMenuItem = styled(MenuItem)<MenuItemProps>(({ theme }) => ({
  "&:hover": {
    backgroundColor: "green" // Hovered, non-selected item
  },
  "&:first-of-type": {
    backgroundColor: "aqua" // Wasn't clear -- is this what you're looking to do when you say "first"?
  },
  "&.Mui-selected": {
    backgroundColor: "red", // Selected, but not-hovered item
    "&:hover": {
      backgroundColor: "yellow" // Selected and hovered item
    },
  }
}));

(The question was a bit unclear to me, so I just styled all basic options.)

这将产生:

No items selected but first item is styled

工作代码Sandbox :https://codesandbox.io/s/beautiful-swartz-9k6nnx?file=/demo.tsx

至于判断元素以查看应用的类,在Chrome中:

  1. 在mui.com的网站上打开精选.
  2. 在要判断的元素上单击鼠标右键并 Select "判断".
  3. 在Chrome Dev工具中,右击元素并 Select "强制状态">;":hover"(或您想要强制的任何其他状态).

For example: enter image description here

Javascript相关问答推荐

如果Arrow函数返回函数,而不是为useEffect返回NULL,则会出现错误

如何迭代叔父元素的子HTML元素

try 使用javascript隐藏下拉 Select

环境值在.js文件/Next.js中不起作用

Angular 形式,从DOM中删除不会删除指定索引处的内容,但会删除最后一项

面对代码中的错误作为前端与后端的集成

有效路径同时显示有效路径组件和不存在的路径组件

如何在和IF语句中使用||和&;&;?

如何在Java脚本中对数据进行签名,并在PHP中验证签名?

Django导入问题,无法导入我的应用程序,但我已在设置中安装了它

用另一个带有类名的div包装元素

我怎样才能点击一个元素,并获得一个与 puppeteer 师导航页面的URL?

将延迟加载的模块转换为Eager 加载的模块

是否有静态版本的`instanceof`?

在此div中添加一个类,并在一段时间后在Java脚本中将其删除

当一条路由在Reaction路由中命中时,如何有条件地渲染两个组件或更改两个插座?

我如何让我的弹力球在JavaScript和HTML画布中相互碰撞后改变 colored颜色 ?

在使用Jest进行测试时,在Express应用程序中未定义Multer

如何遍历数组并在json中添加字段

将句子拆分成单词,并在JavaScript中颠倒