Стилизация не применяется к стилизованному компоненту с использованием синтаксиса style (StyledComponent) - PullRequest
0 голосов
/ 17 октября 2018

Стилизация div с использованием style.div работает просто отлично.

Но стилизация стилизованного компонента с использованием style(FlexItem) ничего не делает.

В чем может быть причина?

import * as React from 'react';
import OuterSectionContainer from './../../ui/OuterSectionContainer';
import InnerSectionContainer from './../../ui/OuterSectionContainer/InnerSectionContainer';
import FlexContainer from './../../ui/OuterSectionContainer/InnerSectionContainer/FlexContainer';
import FlexItem from './../../ui/OuterSectionContainer/InnerSectionContainer/FlexContainer/FlexItem';
import ScaledImage from './../../ui/ScaledImage';
import styled from 'styled-components';

const Testamonials = () => {
    const FlexItemStyled = styled(FlexItem)`
        padding: 10px; 
        background-color: red;
        display: none;
    `;

    return (
        <OuterSectionContainer>
            <InnerSectionContainer>
                <FlexContainer>
                    <FlexItemStyled>
                        <ScaledImage src={require('../../../images/logo.png')} />
                    </FlexItemStyled>
                    <FlexItemStyled>
                        <ScaledImage src={require('../../../images/logo.png')} />
                    </FlexItemStyled>
                    <FlexItemStyled>
                        <ScaledImage src={require('../../../images/logo.png')} />
                    </FlexItemStyled>
                    <FlexItemStyled>
                        <ScaledImage src={require('../../../images/logo.png')} />
                    </FlexItemStyled>
                </FlexContainer>
            </InnerSectionContainer>
        </OuterSectionContainer>
    );
};

export default Testamonials;

1 Ответ

0 голосов
/ 18 октября 2018

FlexItem не должен быть стилевым компонентом, тогда вы должны передать className в подпорках, чтобы использовать styled(FlexItem) синтаксис.

подробнее здесь: https://www.styled -components.com/ Docs / основы # стайлинга-любая-компонента

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...