I’m building a React application and I’m facing an issue with the CSS styles that I’m applying to the Select
component from material UI. Specifically, when I apply some styles to remove padding from the Select
component, the padding gets removed. However, when I refresh the page, the padding gets added back.
Here is my code:
<Select
variant="standard"
name="status"
value={selectedStatus}
label="New Status"
sx={{
overflowY: "auto",
height: 30,
width: "inherit",
backgroundColor: "white !important",
marginX: "2rem",
overflow: "hidden",
textAlign: "left",
"& .MuiSelect-select": {
padding: "0 !important"
}
}}
onChange={handleStatusChange}
>
<MenuItem value="1">Active</MenuItem>
<MenuItem value="0">Inactive</MenuItem>
</Select>
As you can see, I’m trying to remove the padding from the Select component using the !important modifier to ensure that the styles take precedence over other styles. However, when I refresh the page, the padding gets added back.
Can anyone suggest a solution to this issue? I’m not sure if this is a React-specific problem or if it’s related to CSS or Material-UI, which is the UI library I’m using. Please note that I’m using Typescript in my project.