Argthtjtr

I am trying to add background-color through styled component.

If add the styles through style={} attribute it is working as expected but If I add the same style in my styled component file it is not working.

//this is working   

<MyStyle style={{backgroundColor: '#fff' }}>

     //some component here

</MyStyle>





//This is not working.

export const MyStyle = styled.div`

 background-color: ‘#fff’;    

`;

Can somebody point me here what I am missing here?

The first example is simply using the react style builtin, you don't need styled components to do this.

The code in the second example, you need to remove the quotes around the color, like this:

//This is not working.

export const MyStyle = styled.div`

 background-color: #fff;    

`;

Styled components takes css syntax, which unlike json syntax, does not have quotes around option names, color names, etc.

You don't have to put single quote around #fff

export const MyStyle = styled.div`

   background-color: #fff;    

`;

EDITED:

If there are overriding CSS styles that make your div's background not white just yet, and you can't find them, just add !important to this style

export const MyStyle = styled.div`

   background-color: #fff !important;    

`;

Regarding the issue about finding existing CSS styles that might be overriding your preferred style, take a look at this: https://www.styled-components.com/docs/advanced#existing-css