CSS styles getting removed after page refresh in React application

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.