Styled-Component：我想在Styled-Component中使用Variable

Question

I am working on app . Here I created separate file for style I used style-component for custom css but the problem is that I don't have access to use variable instead of HEX value . I put color value in variable but I am not able to use it in 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};