You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
854 B
42 lines
854 B
const defaultTheme = 'light';
|
|
// highlight-next-line
|
|
const ThemeContext = React.createContext(defaultTheme);
|
|
|
|
class ThemeProvider extends React.Component {
|
|
state = {theme: 'light'};
|
|
|
|
render() {
|
|
// highlight-range{2-4}
|
|
return (
|
|
<ThemeContext.Provider value={this.state.theme}>
|
|
{this.props.children}
|
|
</ThemeContext.Provider>
|
|
);
|
|
}
|
|
}
|
|
|
|
class ThemedButton extends React.Component {
|
|
render() {
|
|
//highlight-range{2-4}
|
|
return (
|
|
<ThemeContext.Consumer>
|
|
{theme => <Button theme={theme} />}
|
|
</ThemeContext.Consumer>
|
|
);
|
|
}
|
|
}
|
|
|
|
class App extends React.Component {
|
|
// highlight-range{3}
|
|
// highlight-range{5}
|
|
// highlight-range{7}
|
|
render() {
|
|
return (
|
|
<ThemeProvider>
|
|
<SomeComponent>
|
|
<ThemedButton />
|
|
</SomeComponent>
|
|
</ThemeProvider>
|
|
);
|
|
}
|
|
}
|
|
|