Попытка получить доступ к пользовательским реквизиту в стилизованных компонентах

Question

Привет, я пытаюсь получить доступ к пользовательскому реквизиту в стиле компонента. Я знаю, что это очень простая вещь, но я не могу понять это. Я думаю, что это как-то связано с тем, как я получаю доступ к своей теме.

Она не выдает никакой ошибки, но значение 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')};
`);

Большое спасибо за потраченное время.

Answer 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
`

Экспорт оболочки по умолчанию