reactjs - 样式组件中的动态主题

Question

我在我的 React 应用程序中使用样式组件，并希望使用动态主题。有些区域会使用我的深色主题，有些区域会使用浅色主题。因为样式组件必须在它们所使用的组件之外声明，所以我们如何动态地传递主题？

Answer 1

这正是 ThemeProvider 的意思组件是为了!

您的样式组件可以访问特殊的 theme prop 当他们插入一个函数时:

const Button = styled.button`
  background: ${props => props.theme.primary};
`

这个<Button />组件现在将动态响应 ThemeProvider 定义的主题。你如何定义主题？将任何对象传递给 theme ThemeProvider的支柱:

const theme = {
  primary: 'palevioletred',
};

<ThemeProvider theme={theme}>
  <Button>I'm now palevioletred!</Button>
</ThemeProvider>

我们通过 context 为您的样式组件提供主题，这意味着无论组件和 ThemeProvider 之间有多少组件或 DOM 节点，它仍然会完全相同地工作:

const theme = {
  primary: 'palevioletred',
};

<ThemeProvider theme={theme}>
  <div>
    <SidebarContainer>
      <Sidebar>
        <Button>I'm still palevioletred!</Button>
      </Sidebar>
    </SidebarContainer>
  </div>
</ThemeProvider>

这意味着您可以将整个应用程序包装在一个 ThemeProvider 中，并且所有样式组件都将获得该主题。您可以动态交换该属性以在浅色和深色主题之间切换!

您可以拥有任意数量的 ThemeProvider如您所愿地在您的应用程序中。大多数应用程序只需要一个来包装整个应用程序，但要让应用程序的一部分为浅色主题，而其他部分为深色主题，您只需将它们包装在两个 ThemeProvider 中。具有不同主题的:

const darkTheme = {
  primary: 'black',
};

const lightTheme = {
  primary: 'white',
};

<div>
  <ThemeProvider theme={lightTheme}>
    <Main />
  </ThemeProvider>

  <ThemeProvider theme={darkTheme}>
    <Sidebar />
  </ThemeProvider>
</div>

Main 内任意位置的任何样式组件现在将是浅色主题，以及 Sidebar 内任何位置的任何样式组件将是黑暗主题。它们根据渲染的应用程序区域进行调整，并且您无需执行任何操作即可实现它! 🎉

我鼓励您查看我们的docs about theming ，因为样式化组件在构建时就考虑到了这一点。

在 styled-components 出现之前，JS 中样式的一大痛点是，之前的库对样式的封装和共置做得很好，但都没有适当的主题支持。如果您想了解更多关于我们现有库的其他痛点，我鼓励您观看 my talk at ReactNL我在那里发布了样式组件。 (注意:styled-components 首次出现是在大约 25 分钟后，不要感到惊讶!)