链接:https://pan.baidu.com/s/1jDJj9SFjmFjMNGRFPkKHPQ
提取码:1589 复制这段内容后打开百度网盘手机App,操作更方便哦
App.js
import ThemeContext from './theme-context'
import ThemeBar from './component/ThemeBar'
const theme = {
light: {
className: 'btn btn-primary',
bgColor: '#eeeeee',
color: '#000'
},
dark: {
className: '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={theme.[this.state.theme]}>
<div className="App">
<header className="App-header">
<a className="btn btn-light"
onClick={() => { this.changeTheme('light')} }>浅色主题</a>
<a className="btn btn-secondary"
onClick={() => { this.changeTheme('dark')} }>深色主题</a>
</header>
<ThemeBar></ThemeBar>
</div>
</ThemeContext.Provider>
)
}
}
export default App;