Question

有人可以推荐最好的方法来撰写需要主题的styled-component吗？

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

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

如果我将Avatar.styled.js与<ThemeProvider>一起使用，则可以成功覆盖主题。

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

这样做的首选方法是什么？

Answer 1

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

我们导出一个采用主题道具的组件。该   您提供的主题通过注入您的样式组件   props.theme

如果您需要获取样式组件外的当前主题   （例如在大型组件内），您可以使用withTheme Higher Order   成分

import { withTheme } from 'styled-components'

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

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

export default withTheme(MyComponent)

使用样式化组件来主题组合组件的首选方法是什么？

1 个答案: