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

Question

假设我创建了一个 React 组件

用户可以使用它，但我想允许用户将典型的样式对象传递给它：

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

现在假设这个 Text 组件在内部使用 样式化组件 ：

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

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

Answer 1

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

const TextContainerStyled = styled.div``

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

然而，如果您也想将 Text 引用转发给 TextContainer，则不会转发引用。您可能需要阅读它 here

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

How to forward style object to styled component?

css

reactjs

styled-components