子组件没有props.theme带有React Router的样式化组件的主题

时间:2018-10-09 19:23:27

标签: reactjs redux react-router styled-components

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);

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

有人可以告诉我我要去哪里错吗?

“我的页面”组件具有化简,定位,匹配道具,但没有主题

3 个答案:

答案 0 :(得分:2)

要在组件级别而不是样式内部使用主题,您需要使用withTheme高阶组件。 https://www.styled-components.com/docs/api#withtheme

答案 1 :(得分:0)

docs中所述:

  

在渲染树中,所有样式组件将有权访问提供的主题

并且

这意味着您的“常规”组件不会在其道具中获得主题对象。我花了一些时间才知道。他们本可以在文档中写得更好。

Themeprovider使用react-context api,这意味着您放入其中的所有内容都将在this.context.yourVaribaleName下可用,而在props中则不存在,这是两个不同的东西。 (有关进一步正确使用的信息,请参见上下文api的正式反应文档(上一链接))

因此,您只需在页面组件中执行

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中)

OR

如果您希望主题对象位于样式组件之外,则在“常规”组件中,您必须使用withTheme HOC。参见docs(如former answer中所述)

答案 2 :(得分:-1)

您可以将styledTheme变量作为道具传递给子组件以及React-RouterReducer道具。像这样:

<Route
 exact
 path="/component-route"
 name="CustomComponent"
 //styledTheme is your custom styled-components theme
 render={props => <CustomComponent {...props} theme={styledTheme} />}
/>