kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-04-29 04:35:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #41 from nocategory/update-docs

Browse Source 
docs: fix switch themes code
This commit is contained in:
witt
2020-03-30 06:13:53 +08:00
committed by GitHub
parent a1434a5480 32a854f8c0
commit 5cbb5cc7f7
1 changed files with 12 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
pages/docs/customization/themes.mdx
View File

@@ -28,21 +28,20 @@ export const meta = {
3. Update the value of `theme.type`, and the theme of all components will follow automatically. 3. Update the value of `theme.type`, and the theme of all components will follow automatically.
```jsx ```jsx
import { CSSBaseline, ZEITUIProvider, useTheme } from '@zeit-ui/react' import { CSSBaseline, ZEITUIProvider } from '@zeit-ui/react'
const [type, setType] = useState('light') const App = () => {
const currentTheme = useTheme() const [themeType, setThemeType] = useState('dark')
const switchThemes = () => () => { const switchThemes = () => {
const nextTheme = currentTheme.type === 'dark' ? 'light' : 'dark' setThemeType(lastThemeType => lastThemeType === 'dark' ? 'light' : 'dark')
setType(nextTheme) }
return (
<ZEITUIProvider theme={{ type: themeType }}>
<CSSBaseline />
<YourComponent onClick={switchThemes} />
</ZEITUIProvider>
)
} }
const App = () => (
<ZEITUIProvider theme={{ type }}>
<CSSBaseline />
<YourAppComponent onClick={switchThemes}/>
</ZEITUIProvider>
)
``` ```
<Spacer y={3} /> <Spacer y={3} />