I'm currently working on a feature that involves highlighting a ListItemButton with a specific background color when selected. However, I now want to take it a step further and add an outline or border color around the ListItemButton when it is selected. Unfortunately, my attempt using the borderColor attribute is not yielding the desired result.
https://i.stack.imgur.com/1stsM.png
See the source code snippet below:
/* eslint-disable react/react-in-jsx-scope -- Unaware of jsxImportSource */
/** @jsxImportSource @emotion/react */
import { useState } from "react";
import ListItemButton from "@mui/material/ListItemButton";
import { css } from "@emotion/react";
export default function TestSample() {
const [selected2, setSelected2] = useState(false);
return (
<div className="App">
<ListItemButton
sx={{
"&.Mui-selected": {
backgroundColor: "#02A7DD",
borderColor: "red",
},
"&.Mui-focusVisible": {
backgroundColor: "#02A7DD",
borderColor: "red",
},
":hover": {
backgroundColor: "#02A7DD",
borderColor: "red",
},
}}
selected={selected2}
onClick={() => setSelected2((prev) => !prev)}
>
ListItemButton
</ListItemButton>
</div>
);
}
I would greatly appreciate any insights or feedback you can provide, especially since I am currently delving into MUI and trying to grasp its functionality and implementation. Thank you for your assistance!