样式化的组件，抛光和主题 [英] styled-components, polished and themes

问题描述

我正在一个简单的React项目中尝试使用样式化组件，我有一个传递给组件的主题对象，所以我可以这样做:

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?

谢谢！

推荐答案

定义您的border样式定义，如下所示:

Define your border style definition like this:

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

工作演示

这篇关于样式化的组件，抛光和主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！