reactjs - 对于带有 React Router 的样式组件，子组件没有 props.theme

Question

import {theme} from "./themes";

const App = () => (
  <ThemeProvider theme={theme}>
    <ErrorBoundary showError>
      <Provider store={store}>
        <Router>
          <switch>
            <Route path="/page1" exact component={Page} />
            <Route path="/notfound" component={NotFound} />
          </switch>
        </Router>
      </Provider>
    </ErrorBoundary>
  </ThemeProvider>
export default hot(module)(App);

现在在我的页面组件中，我的 Prop 不包含主题，即 props.theme 未定义

谁能告诉我哪里出错了？

我的页面组件有 reducer 、位置、匹配 Prop ，但没有主题

Answer 1

如 docs 中所写:

In the render tree all styled-components will have access to the provided theme

并且只有他们!

这意味着您的“普通”组件不会在其 Prop 中获取主题对象。我花了一些时间才明白这一点。他们本可以在文档中写得更好一点。

主题提供者使用 react-context api ，这意味着您放入其中的所有内容都将在 this.context.yourVaribaleName 下可用，而不是在 props 中，这是两个不同的东西。(有关进一步正确的用法，请参阅 context api 的官方 React 文档(上一个链接))

因此，在页面组件中，您只需执行以下操作:

const Button = styled.button`
    font-size: 1em;
    color: ${props => props.theme.main};
    border: 2px solid ${props => props.theme.main};
`;

class Page extends React.Component {
    render(){
     return(<Button>Normal</Button>);
    }
}

(样式组件中的 props.theme 并不意味着您将在其中使用样式组件的组件的 props 中也有 this)

或

如果您希望主题对象位于样式组件之外，则在“普通”组件 Prop 中，您必须使用 withTheme HOC。请参阅docs 。 (如 former answer 中所述)