reactjs - 使用 styled-components 主题化组合组件的首选方式是什么？

Question

任何人都可以推荐最好的方式来撰写styled-component需要主题的s吗？

这是我的代码：https ://gist.github.com/aaronmcadam/7bfd63a6bc4cfc36f9947a449c6f494a 。

我有一个Avatar组成一个组件的Image组件，它本身就是一个styled-component.

如果我使用Avatar.styled.jswith <ThemeProvider>，可以成功覆盖主题。

如果我使用Avatar.withTheme.js，主题只能在我使用时被覆盖withTheme。

做这些事情的首选方式是什么？

Answer 1

来自官方文档：https ://github.com/styled-components/styled-components/blob/master/docs/theming.md

我们导出一个带有主题道具的组件。您在那里提供的主题通过 props.theme 注入到您的样式组件中

如果您需要在样式化组件之外（例如在大组件内部）获取当前主题，您可以使用 withTheme 高阶组件

import { withTheme } from 'styled-components'

class MyComponent extends React.Component {
  render() {
    const { theme } = this.props

    console.log('Current theme: ', theme);
    // ...
  }
}

export default withTheme(MyComponent)