样式组件与props.children

Question

到目前为止，我一直在使用css模块使用react。我想切换到样式化的组件，有一件事让我感到困惑。在使用css模块时，我一直将许多UI组件创建为包装器，在中间传递props.children，然后在特定的".module.css“文件中设置包装器的样式。现在，当我看到样式化的组件是如何工作的时，就像创建一个组件并对该元素进行样式化，甚至样式化嵌套的jsx标记。因此，样式化的组件具有包装行为。它是否替代了props.children的使用？

Answer 1

不，Styled Components不会强迫你不要使用props.children。

您可以使用样式化的组件作为包装器，并在其中设置子组件，就像使用css.module样式的组件所做的那样：

我猜你的反应组件是这样组成的：

// css.module
// styles.module.css

.container {
background-color: red;
}

.container > h2 {
color: green;
}

// Your React Component Wrapper:

const Wrapper = ({children}) => <div className={styles.container}>{children}</div>


// And you use it like this:

<Wrapper><h2>This text is green on a red background</h2></Wrapper>

您也可以对样式化的组件执行相同的操作：

const Wrapper = ({ children }) => <StyledWrapper>{children}</StyledWrapper>;

const StyledWrapper = styled.div`
background-color: red;
& > h2 {
color: green;
}
`;

// And you use it like this:

<Wrapper><h2>This text is green on a red background</h2></Wrapper>

结果是相同的，甚至用法也是一样的，styled-components并不强迫您使用某种反应组合模式，而是取决于您是否对容器进行样式化，然后在容器中选择子容器，或者是否单独对所有的子容器进行样式化。

它们只是给了您一些超能力，例如，您可以通过简单地调用组件名来锁定样式组件父级内的样式组件子，或者您有机会在css代码中更容易地使用JS变量，因为所有传递给样式组件的道具都可以被css检索。

演示