样式不适用于使用 style(StyledComponent) 语法的样式化组件

Question

使用 style.div 设计 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;

Answer 1

FlexItem 不应该是样式组件，那么你应该在 props 中传递 className 以使用 styled(FlexItem) 语法。

更多信息在这里：https://www.styled-components.com/docs/basics#styling-any-components

样式不适用于使用 style(StyledComponent) 语法的样式化组件

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

styled-components