Как мне установить цвет фона стилизованного div, используя переменную?

Question

Я пытаюсь установить цвет фона компонента реагирования, который использует стиль div.

Я получаю значение цвета из другого сервиса, <div> оформляется следующим образом:

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

Где я получаю backgroundColor от сервиса, и я убедился, что он возвращает правильное значение:

#FFFFFF

Однако, когда я использую приведенный выше код, цвет фона неизменить, но если я жестко закодирую значение в #FFFFFF, цвет фона изменится.

Answer 1

Если вы хотите использовать props со стилизованным компонентом, вы должны использовать шаблонное выражение и передать ему функцию. Эта функция будет передана вашему props, и все, что возвращает ваша функция, будет добавлено в CSS. Внутри него вы можете создать любую строку CSS, какую захотите, используя эти props.

Например:

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