2 replies

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;
}
}

KP-C

Kevin Powell - Community•15mo ago•

2 replies

vic

how to override the inline css with external css

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;
}
}

how to override the inline css with external css

Similar Threads

how to override the inline css with external css

Similar Threads

Similar Threads

Similar Threads