How do I set the background color of a styled div using a variable?

Question

I am trying to set a background color of a react component which uses a styled div.

I'm receiving the color value from another service, the <div> is styled as follows:

const ContainerDiv = style.div `
  background: backgroundColor;
`;

Where I am getting the backgroundColor from the service and I have verified that it is returning the correct value:

#FFFFFF

However when I use the above code the background color does not change but if I hard code the value to #FFFFFF then the background color changes.

Answer 1

If you want to use props with a styled component you have to use a template expression and pass it a function. That function will be passed your props, and whatever your function returns will be added to the CSS. Inside it you can create whatever CSS string you want using those props.

For instance:

const ContainerDiv = style.div `
    ${props => `background: ${background};`}
`;