如何将样式对象转发到样式组件？答案

【问题标题】：How to forward style object to styled component?如何将样式对象转发到样式组件？
【发布时间】：2022-01-06 16:52:03
【问题描述】：

想象一下我创建了一个反应组件

并且用户可以使用它，但我希望允许用户将一个典型的样式对象传递给它：

<Text style={{color:"red",borderRadius:10}}/>

现在想象一下这个Text 组件在里面使用了样式化的组件：

// Inside Text Component render method
...
return (
    <TextContainerStyled {...props.style}>

TextContainerStyled 是一个样式化的组件。如何将用户提供给Text组件的样式对象转发给TextContainerStyled？

【问题讨论】：

标签： css reactjs styled-components

【解决方案1】：

根据你写的，我认为你需要这样的实现

const TextContainerStyled = styled.div``

const Text = (props)=>{
  return (
    <TextContainerStyled style={props.style}>
     {/* Other children here */}
    </TextContainerStyled/>
  )
}

如果您也想将Text 引用转发到TextContainer，这不会转发引用。你可能需要阅读它here

【讨论】：

是的，所以它转发了风格？我认为如果底层组件不是反应组件，它只会转发有效的 DOM 道具
您将不得不使用Text，如<Text style={{ ...yourStylesYouWantToPass }} />。默认情况下，它不转发任何内容。它只会转发你告诉它的道具。如果你想让它转发所有东西，那么你将不得不将Text的道具传播到TextContainerStyled
我的意思是 TextContainerStyled 将其转发到 div。这就是我转发的意思。我不知道它会转发它。文档说它只会转发有效的 DOM 属性，而样式不是
而不是转发样式对象。您可以以一种您将能够执行类似'const StyledText = styled(Text)``' 的方式来实现它。你可以在这里阅读如何做到这一点(styled-components.com/docs/…)
不，我希望用户将样式对象传递给组件