如何使用样式化组件进行布局？

Question

由于React的要点是使组件可重用，并且页面的布局可以从一个应用程序急剧变化到另一个应用程序，所以我不确定在哪里放置我的特定于布局的样式。有什么建议吗？

Answer 1

组件的放置应由组件的“消费者”决定。因此，例如，如果您有3个组成部分：

• ComponentA
  • ComponentB
    • ComponentC

---

• ComponentC将决定其所有子组件的位置。
• ComponentB将决定其所有子组件的位置， 将包括ComponentC
• ComponentA将决定其所有子组件的位置， 将包括ComponentB

Answer 2

如果您在React中表示全局样式，则有两个选择：

选项1：将它们作为常规CSS文件放入-查看Create-React-App的工作方式-或仅将它们添加到呈现应用程序的地方index/html。

选项2：样式化组件支持主题化，这意味着它们为您提供了<ThemeProvider />元素，然后您可以在下游的任何组件中使用提供的样式。这是the docs including a basic example。

如果在另一方面，您引用的是布局，但在组件/子组件级别上，则基本上是尽可能地拉高布局样式。一个例子是有一个具有自己样式的元素。像这样的东西：

// Layout.js
const myStyledContainer = styled.div`
display: flex;
`
export default (props) => <myStyledContainer>{props.children}</myStyledContainer>

然后在您App.js中，您会遇到类似的事情：

return (
<Layout>

*... your other components or pages or whatever*
</Layout>

这是一种见解，所以只需尝试一下，看看对您的项目有效。