样式化组件中的动态主题 [英] Dynamic Theme in Styled Components

问题描述

我在Reaction应用程序中使用样式化组件，并希望使用动态主题。有些地方会用到我的黑色主题，有些地方会用到光亮。由于样式化组件必须在使用它们的组件外部声明，因此如何动态传递主题？

推荐答案

这正是ThemeProvider组件的用途！

您的样式组件在插入函数时可以访问特殊的theme道具：

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

此<Button />组件现在将动态响应由ThemeProvider定义的主题。你如何定义一个主题？将任何对象传递给ThemeProvider的theme道具：

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，因为样式组件的构建在很大程度上考虑到了这一点。

在样式化组件出现之前，JS中样式的一大痛点是以前的库对样式的封装和并置做得很好，但是没有一个库有适当的主题支持。如果您想更多地了解我们在现有库中遇到的其他痛点，我建议您观看my talk at ReactNL我发布样式化组件的地方。(注意：样式化组件的首次出现时间约为25分钟，请不要惊讶！)

这篇关于样式化组件中的动态主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！