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不应是样式化的组件，然后应在道具中传递className以使用styled(FlexItem)语法。

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

样式不适用于使用style（StyledComponent）语法的样式化组件

1 个答案: