Styled-Component: я хочу использовать переменную в Styled-Component

Question

Я работаю над приложением.Здесь я создал отдельный файл для стиля. Я использовал style-component для пользовательского CSS, но проблема в том, что у меня нет доступа к использованию переменной вместо значения HEX.Я помещаю значение цвета в переменную, но я не могу использовать его в styled-component.

import styled from 'styled-components';

// App Colors
let text ='#fff';

// Top Header Component Main Style
export const HeaderContainer= styled.div `
    margin-top: 67px;
    margin-left: 220px;
    margin-bottom: 30px;
    color: {text};
`

Answer 1

Вам не хватает $ перед скобками.

color: ${text};