Using Ant Design Variables in Styled Components

[hshoja]

I would like to be able to access the Ant Design variables (which are written in Less) within a styled component. Something like this:

const StyledButton = styled(Button)`
  background-color: @primary-color
`

how can I achieve this?

[floatrx]

Try use native css variable instead.

Map with less variables:

:root {
   --primary-color: var(@primary-color);
   // other global variables
}

const StyledButton = styled(Button)`
  background-color: --primary-color;
`

[hshoja]

Try use native css variable instead.

Map with less variables:

:root {
   --primary-color: var(@primary-color);
   // other global variables
}

const StyledButton = styled(Button)`
  background-color: --primary-color;
`

I used this approach, but we have to define it twice.