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未定义
有人可以告诉我我要去哪里错吗?
“我的页面”组件具有化简,定位,匹配道具,但没有主题
答案 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-Router
,Reducer
道具。像这样:
<Route
exact
path="/component-route"
name="CustomComponent"
//styledTheme is your custom styled-components theme
render={props => <CustomComponent {...props} theme={styledTheme} />}
/>