I'm struggling to get my code to work properly. I'm currently using MUI to style my components with a separate CSS file. I'm attempting to style an Alert component, specifically focusing on the alert icon, but I'm having trouble getting it to work.
Here's the JSX component:
<Alert severity='error' className='passwordAlert'>
Invalid Password
</Alert>
And here's the working CSS component:
.passwordAlert {
border-radius: 100px;
width: 80%;
margin-bottom: 0%;
margin-top: 1%;
height: 50px;
padding: 0px;
align-items: center;
}
However, the following CSS component isn't working as expected:
.passwordAlert.MuiAlert-icon {
padding-left: 5%;
}
I prefer to keep my styles in a separate file, and even though I'm aware of other styling methods, I'm wondering if there's a solution using className and a separate CSS file.
Thank you for any assistance you can provide.