MUIで選択した選択肢にスタイルを付けてみた

"use client";

import React from "react";
import IconButton from "@mui/material/IconButton";
import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
import { Select, MenuItem } from "@mui/material";
import { styled } from "@mui/system";

const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
  "&.Mui-selected": {
    backgroundColor: "blue",
    color: "white",
    "&:hover": {
      backgroundColor: "blue",
    },
  },
}));

export default function App() {
  const [value, setValue] = React.useState("");

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <Select value={value} onChange={handleChange} sx={{ width: 200 }}>
      <StyledMenuItem value="option1">選択肢1</StyledMenuItem>
      <StyledMenuItem value="option2">選択肢2</StyledMenuItem>
      <StyledMenuItem value="option3">選択肢3</StyledMenuItem>
    </Select>
  );
}

↓Combobox