嗨,我正在尝试访问样式化组件中的自定义道具。我知道这是非常基本的事情,但我无法弄清楚。我认为这与我访问主题的方式有关。
它不会引发任何错误,但是在打印的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')};
`);
非常感谢您的宝贵时间。
答案 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
`
导出默认包装器