Reactjs 如何扩展导入的组件样式的组件

我无法扩展导入的组件。我查看了样式化组件文档，发现在v4+中应该是“as”，但它不是

组件：

    type Props = {
        padding: string,
        justify: string
    }

    const FlexContainer = styled.div<Props>`
        padding: ${props => props.padding};
        display: flex;
        flex-wrap: wrap;
        justify-content: ${props => props.justify};
    `

    export const Flexcontainer: React.FC<Props> = props =>{
        return (
        <FlexContainer padding={props.padding} justify={props.justify}>
            {props.children}
        </FlexContainer>


 )
}

使用：

import { Flexcontainer }  from '../../reusable/FlexContainer';

const FlexContainerExtended = styled.div`
  color: red;
`

<FlexContainerExtended
  padding={null}
  justify={"flex-start"}
  as={Flexcontainer}>

---

您只需将基本组件传递给样式化函数即可覆盖它

   type Props = {
        padding: string,
        justify: string
    }

    const FlexContainer = styled.div<Props>`
        padding: ${props => props.padding};
        display: flex;
        flex-wrap: wrap;
        justify-content: ${props => props.justify};
    `
    const FlexContainerExtended = styled(FlexContainer)`
       color: red;
    `

    export const Flexcontainer: React.FC<Props> = props =>{
        return (
        <FlexContainer padding={props.padding} justify={props.justify}>
            {props.children}
        </FlexContainer>
 )
}
// And use it like this
<FlexContainerExtended
  padding={null}
  justify={"flex-start"}/>

类型道具={
填充：字符串，
对齐：字符串
}
const FlexContainer=styled.div`
填充：${props=>props.padding}；
显示器：flex；
柔性包装：包装；
调整内容：${props=>props.justify}；
`
const FlexContainerExtended=styled（FlexContainer）`
颜色：红色；
`
导出常量Flexcontainer:React.FC=props=>{
返回(
{props.children}
)
}
//像这样使用它

您只需向

Flexcontainer

组件添加一个prop

className

，如下所示：

export const Flexcontainer: React.FC<Props> = props =>{
    return (
      <FlexContainer className={props.className} padding={props.padding} justify={props.justify} >
        {props.children}
      </FlexContainer>
)}

export const Flexcontainer:React.FC=props=>{
返回(
{props.children}
)}

---

要覆盖样式，样式化组件会将类名作为道具传递给被覆盖的组件，这就是为什么

是的，我可以，但我需要在导入该组件的组件内部。我不明白您对内部组件的意思是什么？我不需要在FlexContainer内部更改样式，而需要在外部更改样式。当我在组件xyz中导入组件Flexcontainer时，我需要覆盖xyz中的Flexcontainer。在这种情况下不能导入Flexcontainer。它也需要在这里定义