theme-context.js

import?React?from?'react'const?ThemeContext?=?React.createContext()export?default?ThemeContext

themebar.js

import?React?from?'react'import?ThemeContext?from?'../theme-context'const?ThemeBar?=?()?=>?{	return?(		<ThemeContext.Consumer>???????????{???????????	theme=>{???????????		return(??????????????????????<div?className="alert?mt-5"?style={{backgroundColor:theme.bgColor,color:theme.color}}>????????????????????????StyleSheet?Section????????????????????????<button?className={theme.classnames}>submit</button>??????????????????????</div>???????????			)???????????	}???????????}?????????</ThemeContext.Consumer>	)}export?default?ThemeBar

app.js

const?themes?=?{??light:?{????classnames:?'btn?btn-primary',????bgColor:?'#eeeeee',????color:?'#000'??},??dark:?{????classnames:?"btn?btn-light",????bgColor:?"#222222",????color:?"#fff"??}}class?App?extends?Component?{??constructor(props)?{????super(props)????this.state?=?{??????theme:?'light'????}????this.changeTheme?=?this.changeTheme.bind(this)

changeTheme(theme)?{????this.setState({??????theme,????})??}??render()?{????return?(??????<ThemeContext.Provider?value={themes[this.state.theme]}>??????<div?className="App">????????<header>???????????<a?href="theme-switcher"?className="btn?btn-light"?onClick={()=>{this.changeTheme('light')}}>Light</a>???????????<a?href="theme-switcher"?className="btn?btn-secondary"?onClick={()=>{this.changeTheme('dark')}}>Dark</a>????????</header>????????<ThemeBar?/>??????</div>??????</ThemeContext.Provider>????);??}}