Embarking on my journey of developing a React app, I made the decision to incorporate Material UI for its array of pre-built components.
However, delving into the customization of these components and their styles has proven to be quite challenging for me.
Here is a snippet of my code:
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
const Dropdown = ({ value, label, options, handleChange }) => {
return (
<FormControl
className="dropdown-container"
variant='outlined'
sx={{
minWidth: 120,
backgroundColor: "#eb6060",
borderRadius: "5px",
border: "1px solid #eb6060",
}}
>
<InputLabel shrink={false}>{value === "" ? label : ""}</InputLabel>
<Select
onChange={handleChange}
label={value === "" ? label : ""}
value={value}
notched={false}
>
{options.map((option) => (
<MenuItem
key={option.code}
value={option.code}
>
{option.alias}
</MenuItem>
))}
</Select>
</FormControl>
);
};
export default Dropdown;
This represents my endeavor in customizing MUI's Select component. Despite my efforts in eliminating the shrinking label and notch within the Select border, challenges persist.
Am I approaching the customization process correctly?
In what ways can I further enhance the customization by eliminating the blue focus outline displayed upon selecting the dropdown component, along with the keyboard focus highlight from the first MenuItem?
UPDATE: By implementing the code provided by Prem Chaudhary, the blue outline has effectively disappeared. The current appearance is showcased below:
How can I independently devise solutions like this? Specifically, I aim to make the subsequent modifications to this component:
- Eliminate the blue highlight from the select component label
- Omit the grey highlight on the initial menu item during menu expansion
- Slightly intensify the select button's background when opening the menu
Ideally, I would like to resolve each issue autonomously without continuously resorting to external assistance. How do I determine the classes necessitating style overrides? Although I attempted leveraging CSS overview for the first point, achieving the desired adjustment remained elusive: