After reviewing numerous questions and answers on this topic, I have yet to find a suitable solution for my issue. Seeking guidance from the community for assistance.
Utilizing the Select component from @mui/material to showcase the number of records per page. Interested in customizing the color of the window's border upon selection, as well as changing the background color of the currently selected item. These specific elements are highlighted with a red arrow in the accompanying image.
SelectMenuItemsPerPageCustom.jsx
import React from 'react';
import { MenuItem, Select } from "@mui/material";
import { styles } from './SelectMenuItemsPerPageStyles';
export default function SelectMenuItemsPerPageCustom({ pageSize, setPageSize }) {
const handleChange = (event) => {
setPageSize(Number(event.target.value));
};
return (
<Select
value={pageSize}
onChange={handleChange}
sx={styles.Select}
>
<MenuItem value={5}>5</MenuItem>
<MenuItem value={10}>10</MenuItem>
<MenuItem value={25}>25</MenuItem>
<MenuItem value={50}>50</MenuItem>
<MenuItem value={100}>100</MenuItem>
</Select>
);
}