styled-components, polished and themes

问题:

I am trying Styled-components in a simple React project, I have a theme object that is passed to the component so I can do:

background-color: ${props => props.theme.primary};

I am also using Polished to modify the passed values, so a button uses a darker version of the color as an outline. I can do this with:

border: 1px solid ${darken(0.05, '#00823b')};

But I need the color value to be from the theme, how do I go about passing the theme properties in?

Thanks!

回答1:

Define your border style definition like this:

border: 1px solid ${props => darken(0.05, props.theme.primary)};

Working Demo