All we need is an easy explanation of the problem, so here it is.
I am using material UI component and I gave custom class to my chip
like you can see I have attached screenshot
here I am trying to make that cross button in white like this
So I check doing inspect element and came to know that it is SVG icon
so in App.css
I tried to make all the svg icon in white like this
svg{ color:white }
but still its not helping me still it showing me black color cross button
How to solve :
I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.
Method 1
try to use !important like svg{ color:white !important; } and check if it works.
if it does not work then inspect the cross element and check what class is applied on it then using that class redeclare your styles in your css file.
Method 2
You should aim at path not svg.
So in your case it will be svg path { background-color: #fff }
Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0