KPC
Kevin Powell - Community•4w ago
vic

how to override the inline css with external css

So I created a reusable component in reactjs and I use inline css for that and I use inline css on whenever I use that component depends on my page now I need to edit component as reusablility , i try css normally it won't work ! But if I tried with ! important rule in css , it works .. is it ok to add ! important on every media queries 
const button={ 
width:'100px',height:'100px' , color:'#fff' } 

export default function Button( {children}  ){

return <button id='btn' style={button} > 
{children}
</button>

}
const button={ 
width:'100px',height:'100px' , color:'#fff' } 

export default function Button( {children}  ){

return <button id='btn' style={button} > 
{children}
</button>

}
in css 
@media only screen and (min-width:320px) and ( max-width:479px){
#btn{
width:20px;
height:20px;
color:blue;
}
}
@media only screen and (min-width:320px) and ( max-width:479px){
#btn{
width:20px;
height:20px;
color:blue;
}
}
2 Replies
Mannix
Mannix•4w ago
well that is the only way to overwrite the inline styles in a css file
vic
vicOP•4w ago
Yeah I just read about that , I tried like max-width in responsive and it works

Did you find this page helpful?