时间戳

首页 > 解决方案 > 尝试访问样式化组件中的自定义道具

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

问题描述

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

它不会引发任何错误，但 margin-bottom 值只是没有显示在打印的 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')};
`);

非常感谢您的宝贵时间。

标签： reactjsstyled-components

解决方案

我假设您在高阶组件中使用 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
`

导出默认包装器

推荐阅读