kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-01-31 09:08:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: migrate basic module name

Browse Source
This commit is contained in:
unix
2020-05-16 02:02:27 +08:00
parent cf19e6a05d
commit b3f5823aa3
21 changed files with 86 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
README.md
View File

@@ -7,7 +7,7 @@
<img alt="CircleCI" src="https://img.shields.io/circleci/build/github/zeit-ui/react?style=for-the-badge&labelColor=000000">
<img alt="npm (scoped)" src="https://img.shields.io/npm/v/@zeit-ui/react?style=for-the-badge&labelColor=000000">
</p>
> Modern and minimalist React UI library, originating from Vercel's design.
@@ -20,13 +20,13 @@
2. import into project:
```jsx
import { CSSBaseline, ZEITUIProvider } from '@zeit-ui/react'
import { ZeitProvider, CssBaseline } from '@zeit-ui/react'
const Application = () => (
<ZEITUIProvider> // ---> Base provider
<CSSBaseline /> // ---> normalize styles
<ZeitProvider> // ---> Base provider
<CssBaseline /> // ---> normalize styles
<AppComponent /> // ---> Your App Component
</ZEITUIProvider>
</ZeitProvider>
)
```
@@ -41,7 +41,7 @@ const Application = () => (
## Development
- [Contributing Guide](https://github.com/zeit-ui/react/blob/master/.github/CONTRIBUTING.md)
- [Contributing Guide](https://github.com/zeit-ui/react/blob/master/.github/CONTRIBUTING.md)
<br/>

3
lib/components/playground/editor.tsx
View File

@@ -1,10 +1,9 @@
import React, { useState } from 'react'
import { LiveEditor } from 'react-live'
import { useConfigs } from 'lib/config-context'
import { useTheme, useToasts, Row, Col, Utils } from 'components'
import { useTheme, useToasts, Row, Col, useClipboard } from 'components'
import CopyIcon from '@zeit-ui/react-icons/copy'
import RightIcon from '@zeit-ui/react-icons/chevronRight'
const { useClipboard } = Utils
interface Props {
code: string

8
pages/_app.tsx
View File

@@ -2,7 +2,7 @@ import Head from 'next/head'
import { NextPage } from 'next'
import { AppProps } from 'next/app'
import React, { useEffect, useState } from 'react'
import { CSSBaseline, ZEITUIProvider, useTheme, ZeitUIThemes } from 'components'
import { CssBaseline, ZeitProvider, useTheme, ZeitUIThemes } from 'components'
import Menu from 'lib/components/menu'
import ConfigContext from 'lib/config-provider'
import useDomClean from 'lib/use-dom-clean'
@@ -54,8 +54,8 @@ const Application: NextPage<AppProps<{}>> = ({ Component, pageProps }) => {
content="initial-scale=1, maximum-scale=1, minimum-scale=1, viewport-fit=cover"
/>
</Head>
<ZEITUIProvider theme={customTheme}>
<CSSBaseline />
<ZeitProvider theme={customTheme}>
<CssBaseline />
<ConfigContext onThemeChange={themeChangeHandle}>
<Menu />
<Component {...pageProps} />
@@ -111,7 +111,7 @@ const Application: NextPage<AppProps<{}>> = ({ Component, pageProps }) => {
border-radius: ${theme.layout.radius};
}
`}</style>
</ZEITUIProvider>
</ZeitProvider>
</>
)
}

6
pages/en-us/components/grid.mdx
View File

@@ -117,10 +117,10 @@ const breakpoints: ZeitUIThemesBreakpoints = {
}
const App = () => (
<ZEITUIProvider theme={{ breakpoints: breakpoints }}>
<CSSBaseline />
<ZeitProvider theme={{ breakpoints: breakpoints }}>
<CssBaseline />
<AppComponent />
</ZEITUIProvider>
</ZeitProvider>
)
```

18
pages/en-us/components/use-body-scroll.mdx
View File

@@ -1,5 +1,5 @@
import { Layout, Playground, Attributes } from 'lib/components'
import { Button, Spacer, Utils, Text, Link } from 'components'
import { Button, Spacer, Text, Link, useBodyScroll } from 'components'
export const meta = {
title: 'use-body-scroll',
@@ -12,29 +12,19 @@ Disable scrolling behavior for body or any element, it is useful for displaying
This is custom React Hooks, you need to follow the <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">Basic Rules</Link> when you use it.
<Spacer y={1.5} />
### Import
```jsx
import { Utils } from '@zeit-ui/react'
const { useBodyScroll } = Utils
```
<Playground
desc="Click button to disable scrolling."
scope={{ Button, Spacer, Utils, Text }}
scope={{ Button, Spacer, Text, useBodyScroll }}
code={`
() => {
const { useBodyScroll } = Utils
const [hidden, setHidden] = useBodyScroll()
return (
<>
<Text small b type={hidden ? 'error' : 'default'}>{hidden ? 'Body disabled.' : 'Body can be scrolled.'}</Text>
<Spacer y={.75} />
<Button size="small" type="success" auto onClick={() => setHidden(true)}>disable scroll</Button>
<Button size="small" type="success-light" auto onClick={() => setHidden(true)}>disable scroll</Button>
<Spacer y={.5} />
<Button size="small" type="secondary" auto onClick={() => setHidden(false)}>reset</Button>
<Button size="small" type="secondary-light" auto onClick={() => setHidden(false)}>reset</Button>
</>
)
}

14
pages/en-us/components/use-click-away.mdx
View File

@@ -1,5 +1,5 @@
import { Layout, Playground, Attributes } from 'lib/components'
import { Utils, Link, Card, Spacer } from 'components'
import { Link, Card, Spacer, useClickAway } from 'components'
export const meta = {
title: 'use-click-away',
@@ -12,21 +12,11 @@ Detect if a click event happened outside of an element.
This is custom React Hooks, you need to follow the <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">Basic Rules</Link> when you use it.
<Spacer y={1.5} />
### Import
```jsx
import { Utils } from '@zeit-ui/react'
const { useClickAway } = Utils
```
<Playground
desc="Click outside the green card to trigger the callback."
scope={{ Utils }}
scope={{ useClickAway }}
code={`
() => {
const { useClickAway } = Utils
const ref = React.useRef()
const [count, setCount] = React.useState(0)
useClickAway(ref, () => setCount(last => last + 1))

14
pages/en-us/components/use-clipboard.mdx
View File

@@ -1,5 +1,5 @@
import { Layout, Playground, Attributes } from 'lib/components'
import { Utils, Link, Button, useToasts, Spacer } from 'components'
import { useClipboard, Link, Button, useToasts, Spacer } from 'components'
export const meta = {
title: 'use-clipboard',
@@ -12,21 +12,11 @@ Copy string to clipboard.
This is custom React Hooks, you need to follow the <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">Basic Rules</Link> when you use it.
<Spacer y={1.5} />
### Import
```jsx
import { Utils } from '@zeit-ui/react'
const { useClipboard } = Utils
```
<Playground
scope={{ Utils, Button, useToasts }}
scope={{ useClipboard, Button, useToasts }}
code={`
() => {
const [, setToast] = useToasts()
const { useClipboard } = Utils
const { copy } = useClipboard()
const handler = () => {
copy('hello, zeit-ui')

18
pages/en-us/components/use-current-state.mdx
View File

@@ -1,5 +1,5 @@
import { Layout, Playground, Attributes } from 'lib/components'
import { Utils, Link, Button, Spacer } from 'components'
import { useCurrentState, Link, Button, Spacer } from 'components'
export const meta = {
title: 'use-current-state',
@@ -17,20 +17,10 @@ try <Link target="_blank" color href="https://reactjs.org/docs/hooks-reference.h
This is custom React Hooks, you need to follow the <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">Basic Rules</Link> when you use it.
<Spacer y={1.5} />
### Import
```jsx
import { Utils } from '@zeit-ui/react'
const { useCurrentState } = Utils
```
<Playground
scope={{ Utils, Button }}
scope={{ useCurrentState, Button }}
code={`
() => {
const { useCurrentState } = Utils
const [value, setValue] = React.useState(0)
const [value2, setValue2, value2Ref] = useCurrentState(0)
const handler = () => {
@@ -40,9 +30,7 @@ const { useCurrentState } = Utils
alert(str)
}
return (
<>
<Button size="small" auto onClick={handler}>Click to show</Button>
</>
<Button size="small" auto onClick={handler}>Click to show</Button>
)
}
`} />

23
pages/en-us/components/use-media-query.mdx
View File

@@ -1,5 +1,5 @@
import { Layout, Playground, Attributes } from 'lib/components'
import { Utils, Link, Code, Spacer } from 'components'
import { useMediaQuery, Link, Code, Spacer } from 'components'
import NextLink from 'next/link'
import PlaygroundTitle from 'lib/components/playground/title'
@@ -15,20 +15,10 @@ If you just want to build the layout, try <NextLink href="/en-us/components/grid
This is custom React Hooks, you need to follow the <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">Basic Rules</Link> when you use it.
<Spacer y={1.5} />
### Import
```jsx
import { Utils } from '@zeit-ui/react'
const { useMediaQuery } = Utils
```
<Playground
scope={{ Utils, Code }}
scope={{ useMediaQuery, Code }}
code={`
() => {
const { useMediaQuery } = Utils
const isXS = useMediaQuery('xs')
const isSM = useMediaQuery('sm')
const isMD = useMediaQuery('md')
@@ -45,10 +35,9 @@ const { useMediaQuery } = Utils
<Playground
title="Match Type"
desc="You can choose to match up or down."
scope={{ Utils, Code }}
scope={{ useMediaQuery, Code }}
code={`
() => {
const { useMediaQuery } = Utils
const upMD = useMediaQuery('md', { match: 'up' })
return (
<>
@@ -71,10 +60,10 @@ const breakpoints: ZeitUIThemesBreakpoints = {
}
const App = () => (
<ZEITUIProvider theme={{ breakpoints: breakpoints }}>
<CSSBaseline />
<ZeitProvider theme={{ breakpoints: breakpoints }}>
<CssBaseline />
<AppComponent />
</ZEITUIProvider>
</ZeitProvider>
)
```

8
pages/en-us/guide/installation.mdx
View File

@@ -34,13 +34,13 @@ and a package manager: <Link href="https://www.npmjs.com/">NPM</Link> or <Link h
<Display width="90%">
```jsx
import { ZEITUIProvider, CSSBaseline } from '@zeit-ui/react'
import { ZeitProvider, CssBaseline } from '@zeit-ui/react'
const Application = () => (
<ZEITUIProvider> // ---> Base provider
<CSSBaseline /> // ---> normalize styles
<ZeitProvider> // ---> Base provider
<CssBaseline /> // ---> normalize styles
<AppComponent /> // ---> Your App Component
</ZEITUIProvider>
</ZeitProvider>
)
```

4
pages/en-us/guide/server-render.mdx
View File

@@ -44,12 +44,12 @@ Then we add the following codes to the file:
```js
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { CSSBaseline } from '@zeit-ui/react'
import { CssBaseline } from '@zeit-ui/react'
class MyDocument extends Document {
static async getInitialProps (ctx) {
const initialProps = await Document.getInitialProps(ctx)
const styles = CSSBaseline.flush()
const styles = CssBaseline.flush()
return {
...initialProps,

24
pages/en-us/guide/themes.mdx
View File

@@ -14,21 +14,21 @@ export const meta = {
### Switch themes
<Note>Before using any Components, you must add <Code>ZEITUIProvider</Code> to the root node.</Note>
<Note>Before using any Components, you must add <Code>ZeitProvider</Code> to the root node.</Note>
<Spacer y={0.5} />
<Note type="success"><Code>CSSBaseline</Code> provides basic CSS support, which is similar to <Code>normalize</Code>.</Note>
<Note type="success"><Code>CssBaseline</Code> provides basic CSS support, which is similar to <Code>normalize</Code>.</Note>
<Spacer y={1} />
**Now you can change the theme as follows:**
1. Make sure `ZEITUIProvider` and `CSSBaseline` are already on the root component.
1. Make sure `ZeitProvider` and `CssBaseline` are already on the root component.
2. Get the current theme of the page through hook `useTheme`.
3. Update the value of `theme.type`, and the theme of all components will follow automatically.
```jsx
import { CSSBaseline, ZEITUIProvider } from '@zeit-ui/react'
import { CssBaseline, ZeitProvider } from '@zeit-ui/react'
const App = () => {
const [themeType, setThemeType] = useState('dark')
@@ -36,10 +36,10 @@ const App = () => {
setThemeType(lastThemeType => lastThemeType === 'dark' ? 'light' : 'dark')
}
return (
<ZEITUIProvider theme={{ type: themeType }}>
<CSSBaseline />
<ZeitProvider theme={{ type: themeType }}>
<CssBaseline />
<YourComponent onClick={switchThemes} />
</ZEITUIProvider>
</ZeitProvider>
)
}
```
@@ -58,7 +58,7 @@ Of course, if a *component* doesn't use your customize variables, it doesn't mak
<Note type="warning">The more changes you custom, the more Components <b>Re-Render</b>.</Note>
```jsx
import { CSSBaseline, ZEITUIProvider } from '@zeit-ui/react'
import { CssBaseline, ZeitProvider } from '@zeit-ui/react'
const myTheme = {
palette: {
@@ -67,10 +67,10 @@ const myTheme = {
}
const App = () => (
<ZEITUIProvider theme={myTheme}>
<CSSBaseline />
<YourAppComponent onClick={switchThemes}/>
</ZEITUIProvider>
<ZeitProvider theme={myTheme}>
<CssBaseline />
<YourAppComponent onClick={switchThemes}/>
</ZeitProvider>
)
```

6
pages/zh-cn/components/grid.mdx
View File

@@ -117,10 +117,10 @@ const breakpoints: ZeitUIThemesBreakpoints = {
}
const App = () => (
<ZEITUIProvider theme={{ breakpoints: breakpoints }}>
<CSSBaseline />
<ZeitProvider theme={{ breakpoints: breakpoints }}>
<CssBaseline />
<AppComponent />
</ZEITUIProvider>
</ZeitProvider>
)
```

14
pages/zh-cn/components/use-body-scroll.mdx
View File

@@ -1,5 +1,5 @@
import { Layout, Playground, Attributes } from 'lib/components'
import { Button, Spacer, Utils, Text, Link } from 'components'
import { Button, Spacer, useBodyScroll, Text, Link } from 'components'
export const meta = {
title: '锁定滚动 useBodyScroll',
@@ -12,21 +12,11 @@ export const meta = {
这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。
<Spacer y={1.5} />
### 引入工具
```jsx
import { Utils } from '@zeit-ui/react'
const { useBodyScroll } = Utils
```
<Playground
desc="点击按钮以锁定滚动."
scope={{ Button, Spacer, Utils, Text }}
scope={{ Button, Spacer, useBodyScroll, Text }}
code={`
() => {
const { useBodyScroll } = Utils
const [hidden, setHidden] = useBodyScroll()
return (
<>

14
pages/zh-cn/components/use-click-away.mdx
View File

@@ -1,5 +1,5 @@
import { Layout, Playground, Attributes } from 'lib/components'
import { Utils, Link, Card, Spacer } from 'components'
import { useClickAway, Link, Card, Spacer } from 'components'
export const meta = {
title: '点击他处 useClickAway',
@@ -12,21 +12,11 @@ export const meta = {
这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。
<Spacer y={1.5} />
### 引入工具
```jsx
import { Utils } from '@zeit-ui/react'
const { useClickAway } = Utils
```
<Playground
desc="点击绿色块外部才能触发回调。"
scope={{ Utils }}
scope={{ useClickAway }}
code={`
() => {
const { useClickAway } = Utils
const ref = React.useRef()
const [count, setCount] = React.useState(0)
useClickAway(ref, () => setCount(last => last + 1))

18
pages/zh-cn/components/use-clipboard.mdx
View File

@@ -1,5 +1,5 @@
import { Layout, Playground, Attributes } from 'lib/components'
import { Utils, Link, Button, useToasts, Spacer } from 'components'
import { useClipboard, Link, Button, useToasts, Spacer } from 'components'
export const meta = {
title: '剪切板 useClipboard',
@@ -12,30 +12,18 @@ export const meta = {
这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。
<Spacer y={1.5} />
### 引入工具
```jsx
import { Utils } from '@zeit-ui/react'
const { useClipboard } = Utils
```
<Playground
scope={{ Utils, Button, useToasts }}
scope={{ useClipboard, Button, useToasts }}
code={`
() => {
const [, setToast] = useToasts()
const { useClipboard } = Utils
const { copy } = useClipboard()
const handler = () => {
copy('hello, zeit-ui')
setToast({ text: '文字已拷贝。' })
}
return (
<>
<Button size="small" auto onClick={handler}>点击拷贝</Button>
</>
<Button size="small" auto onClick={handler}>点击拷贝</Button>
)
}
`} />

18
pages/zh-cn/components/use-current-state.mdx
View File

@@ -1,5 +1,5 @@
import { Layout, Playground, Attributes } from 'lib/components'
import { Utils, Link, Button, Spacer } from 'components'
import { useCurrentState, Link, Button, Spacer } from 'components'
export const meta = {
title: ' 当前值 useCurrentState',
@@ -15,20 +15,10 @@ export const meta = {
这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。
<Spacer y={1.5} />
### 引入工具
```jsx
import { Utils } from '@zeit-ui/react'
const { useCurrentState } = Utils
```
<Playground
scope={{ Utils, Button }}
scope={{ useCurrentState, Button }}
code={`
() => {
const { useCurrentState } = Utils
const [value, setValue] = React.useState(0)
const [value2, setValue2, value2Ref] = useCurrentState(0)
const handler = () => {
@@ -38,9 +28,7 @@ const { useCurrentState } = Utils
alert(str)
}
return (
<>
<Button size="small" auto onClick={handler}>点击显示</Button>
</>
<Button size="small" auto onClick={handler}>点击显示</Button>
)
}
`} />

23
pages/zh-cn/components/use-media-query.mdx
View File

@@ -1,5 +1,5 @@
import { Layout, Playground, Attributes } from 'lib/components'
import { Utils, Link, Code, Spacer } from 'components'
import { useMediaQuery, Link, Code, Spacer } from 'components'
import NextLink from 'next/link'
import PlaygroundTitle from 'lib/components/playground/title'
@@ -15,20 +15,10 @@ export const meta = {
这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。
<Spacer y={1.5} />
### 引入工具
```jsx
import { Utils } from '@zeit-ui/react'
const { useMediaQuery } = Utils
```
<Playground
scope={{ Utils, Code }}
scope={{ useMediaQuery, Code }}
code={`
() => {
const { useMediaQuery } = Utils
const isXS = useMediaQuery('xs')
const isSM = useMediaQuery('sm')
const isMD = useMediaQuery('md')
@@ -45,10 +35,9 @@ const { useMediaQuery } = Utils
<Playground
title="匹配类型"
desc="你可以选择向上或是向下匹配媒体查询。"
scope={{ Utils, Code }}
scope={{ useMediaQuery, Code }}
code={`
() => {
const { useMediaQuery } = Utils
const upMD = useMediaQuery('md', { match: 'up' })
return (
<>
@@ -70,10 +59,10 @@ const breakpoints: ZeitUIThemesBreakpoints = {
}
const App = () => (
<ZEITUIProvider theme={{ breakpoints: breakpoints }}>
<CSSBaseline />
<ZeitProvider theme={{ breakpoints: breakpoints }}>
<CssBaseline />
<AppComponent />
</ZEITUIProvider>
</ZeitProvider>
)
```

8
pages/zh-cn/guide/installation.mdx
View File

@@ -34,13 +34,13 @@ export const meta = {
<Display width="90%">
```jsx
import { ZEITUIProvider, CSSBaseline } from '@zeit-ui/react'
import { ZeitProvider, CssBaseline } from '@zeit-ui/react'
const Application = () => (
<ZEITUIProvider> // ---> Base provider
<CSSBaseline /> // ---> normalize styles
<ZeitProvider> // ---> Base provider
<CssBaseline /> // ---> normalize styles
<AppComponent /> // ---> Your App Component
</ZEITUIProvider>
</ZeitProvider>
)
```

4
pages/zh-cn/guide/server-render.mdx
View File

@@ -44,12 +44,12 @@ export const meta = {
```js
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { CSSBaseline } from '@zeit-ui/react'
import { CssBaseline } from '@zeit-ui/react'
class MyDocument extends Document {
static async getInitialProps (ctx) {
const initialProps = await Document.getInitialProps(ctx)
const styles = CSSBaseline.flush()
const styles = CssBaseline.flush()
return {
...initialProps,

24
pages/zh-cn/guide/themes.mdx
View File

@@ -15,21 +15,21 @@ export const meta = {
### 切换主题
<Note>在使用任何组件前，请确保已添加 <Code>ZEITUIProvider</Code> 至应用的根节点。</Note>
<Note>在使用任何组件前，请确保已添加 <Code>ZeitProvider</Code> 至应用的根节点。</Note>
<Spacer y={0.5} />
<Note type="success"><Code>CSSBaseline</Code> 提供了基础的 CSS 样式，这和你熟悉的 <Code>normalize</Code> 有些类似。</Note>
<Note type="success"><Code>CssBaseline</Code> 提供了基础的 CSS 样式，这和你熟悉的 <Code>normalize</Code> 有些类似。</Note>
<Spacer y={1} />
**现在你可以根据如下所示步骤切换主题：**
1. 确保 `ZEITUIProvider` 与 `CSSBaseline` 已经添加至根节点。
1. 确保 `ZeitProvider` 与 `CssBaseline` 已经添加至根节点。
2. (可选的) 通过钩子 `useTheme` 获取所有可用的主题变量。
3. 更新 `theme.type` 的值，所有的组件都会随之自动变化。
```jsx
import { CSSBaseline, ZEITUIProvider } from '@zeit-ui/react'
import { CssBaseline, ZeitProvider } from '@zeit-ui/react'
const App = () => {
const [themeType, setThemeType] = useState('dark')
@@ -37,10 +37,10 @@ const App = () => {
setThemeType(lastThemeType => lastThemeType === 'dark' ? 'light' : 'dark')
}
return (
<ZEITUIProvider theme={{ type: themeType }}>
<CSSBaseline />
<ZeitProvider theme={{ type: themeType }}>
<CssBaseline />
<YourComponent onClick={switchThemes} />
</ZEITUIProvider>
</ZeitProvider>
)
}
```
@@ -49,7 +49,7 @@ const App = () => {
### 自定义主题
自定义主题样式在 `@zeit-ui/react` 中是非常简单的，你只需要提供一个新的样式对象给 `ZEITUIProvider`，所有的组件都会自然变化以适应你自定义的属性。
自定义主题样式在 `@zeit-ui/react` 中是非常简单的，你只需要提供一个新的样式对象给 `ZeitProvider`，所有的组件都会自然变化以适应你自定义的属性。
这里有 <Link target="_blank" color href="https://github.com/zeit-ui/react/tree/master/examples/custom-themes">一个完整的示例项目</Link> 可供参考。
@@ -59,7 +59,7 @@ const App = () => {
<Note type="warning">自定义越多的主题，就会有越多的 <b>重新渲染</b> 发生。</Note>
```jsx
import { CSSBaseline, ZEITUIProvider } from '@zeit-ui/react'
import { CssBaseline, ZeitProvider } from '@zeit-ui/react'
const myTheme = {
palette: {
@@ -68,10 +68,10 @@ const myTheme = {
}
const App = () => (
<ZEITUIProvider theme={myTheme}>
<CSSBaseline />
<ZeitProvider theme={myTheme}>
<CssBaseline />
<YourAppComponent onClick={switchThemes}/>
</ZEITUIProvider>
</ZeitProvider>
)
```