I am currently utilizing the React MUI Select Component for my forms, specifically for language selection. My issue arises when I need a different style for the dropdown menu of the language Select component. Overriding the relevant class would apply this new style to every Select component, but I only want it to affect the language Select. You can see an example in the image below:
https://i.stack.imgur.com/kfXdZ.png
Below is the code snippet:
const LanguagesSelect = props => {
return (
<Select className="test" classes="assad" style={{ position: "relative !important", left: "20px !important", top: "30px !important", width: "168.3px !important", background: "white !important", borderRadius:"12.75px" }} >
<MenuItem className="menuTest" style={{ paddingLeft: "5px" }}>
<div style={{ display: "flex", width: "100%" }}>
<img src={require("../../../assets/img/icons/flags/franch.svg").default} />
<div style={{ marginLeft: "5px" }} >Franch</div>
</div>
</MenuItem>
<MenuItem className="menuTest" style={{ paddingLeft: "5px" }}>
<img src={require("../../../assets/img/icons/flags/eng.svg").default} />
<div style={{ marginLeft: "5px" }}>English</div>
</MenuItem>
<MenuItem className="menuTest" style={{ paddingLeft: "5px" }}>
<img src={require("../../../assets/img/icons/flags/turkish.svg").default} />
<div style={{ marginLeft: "5px" }}>Turkish</div>
</MenuItem>
<MenuItem className="menuTest" style={{ paddingLeft: "5px" }}>
<img src={require("../../../assets/img/icons/flags/czech.svg").default} />
<div style={{ marginLeft: "5px" }}>Czech</div>
</MenuItem>
<MenuItem className="menuTest" style={{ paddingLeft: "5px" }}>
<img src={require("../../../assets/img/icons/flags/hebrew.svg").default} />
<div style={{ marginLeft: "5px" }}>עברית</div>
</MenuItem>
</Select>
)
}