Styled-компонент не принимает реквизит

Question

Я пытаюсь передать реквизит моему стилизованному компоненту. Я использую стилевой компонент зависимости npm.

import React, { Component } from 'react';
import styled from 'styled-components';

class WidgetContainer extends Component {

  render() {

    return (
        <Wrapper name='widget-container'>
        </Wrapper> 
    );
  }
}

const mapStateToProps = state => {
  return {
    user: state.user, 
    bannerStatus: true
  };
};

export default withRouter(connect(mapStateToProps)(WidgetContainer));

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  margin: auto;
  align-items: center; 
  justify-content: flex-start;
  background: -webkit-linear-gradient(top, rgba(162, 209, 234, 1) 0%, rgba(56, 83, 132, 1) 100%);
  padding-top: ${(props) => { 
    console.log(props.bannerStatus)
    console.log('DATA')
    return props.user ? '160px' : '126px'}};
  overflow-y: auto;
  padding-bottom: 40px;
  @media(max-width: 768px) {
    padding-top: 126px;
    padding-bottom: 5px;
  }
`;

В console.log, который вы видите, возвращается значение undefined. Даже если значение жестко закодировано. Тернарный оператор не работает в результате.

Вот документы: https://www.styled -components.com / docs / basics # adapting-based-on-props .

Answer 1

Вы отображаете состояние для реквизита только в WidgetContainer. Ваш Wrapper компонент не проходит ни одного реквизита.

Try <Wrapper bannerStatus={props.bannerStatus} name='widget-container'></Wrapper> или <Wrapper user={props.user} bannerStatus={props.bannerStatus} name='widget-container'></Wrapper>.