尝试访问样式化组件中的自定义道具

时间:2020-02-09 01:20:27

标签: reactjs styled-components

嗨,我正在尝试访问样式化组件中的自定义道具。我知道这是非常基本的事情,但我无法弄清楚。我认为这与我访问主题的方式有关。

它不会引发任何错误,但是在打印的CSS中没有显示空白页边距值。

您能指出我的方向吗?谢谢!

import StyledWrapper from './productCardStyles';

<StyledWrapper spaceBelow={spaceBelow}>
    hello world 
</StyledWrapper>


//productCardStyles.js
export default styled('div')(
  ({ theme }) => `
  background: red;
  margin-bottom: ${props => (props.spaceBelow ? '25px' : '0')};
`);

非常感谢您的宝贵时间。

1 个答案:

答案 0 :(得分:1)

我假设您在高阶组件中使用ThemeProvider。您只需使用props.theme ...即可访问主题。

更新您的productCardStyles.js

import styled from 'styled-components'

const wrapper = styled.div`
  background: red;
  margin-bottom: ${props => (props.spaceBelow ? '25px' : '0')};
  color: ${props => props.theme.primaryColor}   // to access theme
`

导出默认包装器