Unable to style the icon in the Alert component in material in react using a separate css file-CodePudding

I need help understanding how to make my code work. I'm working with MUI styling my components using a separate CSS file. I'm trying to style the following an Alert component and it doesn't work. I want to specifically style the alert icon, however, this style doesn't work.

JSX component:

    <Alert severity='error' className='passwordAlert'>
        Invalid Password
    </Alert>

CSS component (this works):

    .passwordAlert {
        border-radius: 100px;
        width: 80%;
        margin-bottom: 0%;
        margin-top: 1%;
        height: 50px;
        padding: 0px;
        align-items: center;
    }

CSS component (this is the part that doesn't work):

    .passwordAlert.MuiAlert-icon {
        padding-left: 5%;
    }

I would like to continue using a separate file for style and I know that there are other styling methods, but is there a solution using className and a separate CSS file?

Thanks in advance.

CodePudding user response：

Combining selectors won't work here as MuiAlert-icon and .passwordAlert don't occur in the same element. Write CSS for MuiAlert-icon separately.

CodePudding user response：

You shouldn't create a separate file and customize MUI components. MUI has many strategies for customizing components. you can read How to customize MUI components