How do I customize Material UI components (e.g. removing blue outline on Select component)?

I just started developing a React app and decided to give Material UI a try for its pre-built components.

However, I've been having a difficult time figuring out how to properly customize the components and their styles.

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 has been my attempt so far at customizing MUI's Select component. I have tried removing the shrinking label and the notch that appears on each Select component's border.

1. Have I been customizing this the right way?

2. How can I further customize it to remove the blue focus outline that appears when I click on my dropdown component, as well as the keyboard focus highlight on the first MenuItem?

EDIT: Adding the code given by Prem Chaudhary has removed the blue outline. This is what it looks like now:

How should I go about figuring out a solution like this myself? For example, I still want to make the following changes to this component:

1. Remove the blue highlight on the select component label
2. Remove the grey highlight on the first menu item when the menu opens
3. Slightly darken the select button's background when I open the menu

Ideally I'd be able to find solutions to all of these by myself without having to ask stack overflow each time. How can I find which classes to override styles for? I have tried using CSS overview for #1 but was not able to make the change I wanted:

To achieve the desired customizations, the following modifications can be made:

Adjust the MuiOutlinedInput-notchedOutline styles of the FormControl:

sx={{
  minWidth: 120,
  backgroundColor: "#eb6060",
  borderRadius: "5px",
  border: "1px solid #eb6060",
  '& .MuiOutlinedInput-notchedOutline': {
       border: 'none',
   },
   '&:hover .MuiOutlinedInput-notchedOutline': {
       border: 'none',
   },
   '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
       border: 'none',
   },
}}

here, The MuiOutlinedInput-notchedOutline styles for the FormControl have been adjusted to remove the outlined border when not focused, hovered, or focused with content.

EDIT: When you encounter issues or aim to meet specific requirements, you can follow these approaches:

Approach 1: Documentation Exploration
One of the most reliable methods to address issues is by thoroughly examining the documentation provided by the library or framework being used. Although this approach may require some time and effort, it is considered the best course of action. Additionally, relying on official documentation ensures that our code is supported by the library's maintainers if any future complications arise.

Approach 2: Browser Inspector Tool Utilization
Fast approach is the use of a browser inspector tool to inspect the element's structure and the CSS applied to it. by inspecting the elements you can see whether your CSS is applied to the elements or overridden by the other CSS.

for example, here you can see the CSS in the browser inspector that resolves your first issue.

Solutions for your follow-up issues:

Adjust the styles of the FormControl:

sx={{ minWidth: 120,
    backgroundColor: "#eb6060",
    borderRadius: "5px",
    border: "1px solid #eb6060",
    '& .MuiOutlinedInput-notchedOutline': {
        border: 'none',
    },
    '&:hover .MuiOutlinedInput-notchedOutline': {
        border: 'none',
    },
    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
        border: 'none',
    },
    '& .MuiSelect-select': {
        color: '#FFF' // remove the blue highlight on select component label
    },
    '& .Mui-focused .MuiSelect-select': {
        backgroundColor: '#e84545' // Slightly darken the select button's background when menu is opened
    }
}}

Adjust the styles of the MenuItem:

sx={{ 
    '&.Mui-selected.Mui-focusVisible': {
        backgroundColor: '#FFF' //Set the highlight color to white on the first menu item when the menu opens
    }
}}