CODEWITHSUNDEEP
styled-components
user1283776
user1283776

Reputation: 21764

Styling is not applied to styled component using style(StyledComponent) syntax

Styling a div using style.div works just fine.

But styling a styled component using style(FlexItem) does nothing.

What might be the reason?

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;

Upvotes: 0

Views: 80

Answers (1)

Deve
Deve

Reputation: 1779

FlexItem should not be a styled-components, then you should pass className in props to use styled(FlexItem) syntax.

more info here : https://www.styled-components.com/docs/basics#styling-any-components

Upvotes: 1

Related Questions