useContext

import React, { useContext } from 'react'

//主题色
const themes = {
	light:{
		foreground:'#000',
		background:'#eee'
	},
	dark:{
		foreground:'#fff',
		background:'#222'
	}
}

//创建contetxt
const ThemeContext = React.createContext(themes.light)//初始值

function ThemeButton(){
	const theme = useContext(ThemeContext)
	return <button style={{background: theme.background,color:theme.foreground}}>
		hello world
	</button>
}

function Toolbar(){
	return <div>
		<ThemeButton></ThemeButton>
	</div>
}

function App(){
	return <ThemeContext.Provider value={themes.dark}>
		<Toolbar></Toolbar>
	</ThemeContext.Provider>
}

export default App