mirror of
https://github.com/zhigang1992/react.git
synced 2026-02-02 09:08:52 +08:00
Merge pull request #74 from unix/examples
docs(examples): add custom-themes sample
This commit is contained in:
witt
3
examples/custom-themes/README.md
Normal file
3
examples/custom-themes/README.md
Normal file
@@ -0,0 +1,3 @@
|
||||
## Custom themes example
|
||||
|
||||
|
||||
32
examples/custom-themes/package.json
Normal file
32
examples/custom-themes/package.json
Normal file
@@ -0,0 +1,32 @@
|
||||
{
|
||||
"name": "custom-themes",
|
||||
"version": "1.0.0",
|
||||
"main": "index.js",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"dev": "react-scripts start",
|
||||
"build": "react-scripts build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@zeit-ui/react": "^0.0.1-beta.17",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^16.9.32",
|
||||
"@types/react-dom": "^16.9.6",
|
||||
"react-scripts": "^3.4.1"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
11
examples/custom-themes/public/index.html
Normal file
11
examples/custom-themes/public/index.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Custom themes</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
18
examples/custom-themes/src/home.jsx
Normal file
18
examples/custom-themes/src/home.jsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import React from 'react'
|
||||
import { Card, Text, Tag, useTheme } from '@zeit-ui/react'
|
||||
|
||||
const Home = () => {
|
||||
const theme = useTheme()
|
||||
|
||||
return (
|
||||
<Card shadow style={{ width: '500px', margin: '100px auto' }}>
|
||||
<Text>Modern and minimalist React UI library.</Text>
|
||||
<Text type={'success'}>Modern and minimalist React UI library. <Tag>{theme.palette.success}</Tag></Text>
|
||||
<Text type={'warning'}>Modern and minimalist React UI library. <Tag>{theme.palette.warning}</Tag></Text>
|
||||
<Text type={'error'}>Modern and minimalist React UI library. <Tag>{theme.palette.error}</Tag></Text>
|
||||
<Text type={'secondary'}>Modern and minimalist React UI library.</Text>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default Home
|
||||
25
examples/custom-themes/src/index.jsx
Normal file
25
examples/custom-themes/src/index.jsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import React from 'react'
|
||||
import ReactDom from 'react-dom'
|
||||
import { ZEITUIProvider, CSSBaseline } from '@zeit-ui/react'
|
||||
import Home from './home'
|
||||
import Theme from './theme'
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<ZEITUIProvider theme={Theme}>
|
||||
<CSSBaseline />
|
||||
<Home />
|
||||
</ZEITUIProvider>
|
||||
)
|
||||
}
|
||||
|
||||
ReactDom.render(
|
||||
(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
),
|
||||
document.getElementById('app')
|
||||
)
|
||||
|
||||
export default App
|
||||
24
examples/custom-themes/src/theme.js
Normal file
24
examples/custom-themes/src/theme.js
Normal file
@@ -0,0 +1,24 @@
|
||||
|
||||
|
||||
/**
|
||||
* Just customize what you need, deep merge themes by default.
|
||||
*
|
||||
* If you are using TypeScript, please use the following type definition.
|
||||
* If you are using JavaScript, refer to https://github.com/zeit-ui/react/blob/master/components/styles/themes/default.ts
|
||||
*/
|
||||
|
||||
// import {
|
||||
// ZeitUIThemes,
|
||||
// ZeitUIThemesPalette,
|
||||
// ZeitUIThemesExpressiveness,
|
||||
// ZeitUIThemesLayout,
|
||||
// ZeitUIThemesFont,
|
||||
// } from '@zeit-ui/react'
|
||||
|
||||
export default {
|
||||
palette: {
|
||||
success: '#ccc',
|
||||
warning: '#ccc',
|
||||
error: '#ccc',
|
||||
}
|
||||
}
|
||||
10697
examples/custom-themes/yarn.lock
Normal file
10697
examples/custom-themes/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
@@ -48,9 +48,11 @@ const App = () => {
|
||||
|
||||
### Customizing theme
|
||||
|
||||
Customize theme is very simple in `@zeit-ui/react`, you just need to provide a new theme `Object`, and all the components will change automatically.
|
||||
Customize theme is very simple in `@zeit-ui/react`, you just need to provide a new theme `Object`,
|
||||
and all the components will change automatically.
|
||||
Here is <Link target="_blank" pure color href="https://github.com/zeit-ui/react/tree/master/examples/custom-themes">a complete sample project</Link> for reference.
|
||||
|
||||
Of course, if a *Component* doesn't use your customize variables, it doesn't make any additional **changes** or **rendering**.
|
||||
Of course, if a *component* doesn't use your customize variables, it doesn't make any additional **changes** or **rendering**.
|
||||
|
||||
<Spacer y={1} />
|
||||
<Note type="warning">The more changes you custom, the more Components <b>Re-Render</b>.</Note>
|
||||
|
||||
@@ -50,6 +50,8 @@ const App = () => {
|
||||
### 自定义主题
|
||||
|
||||
自定义主题样式在 `@zeit-ui/react` 中是非常简单的，你只需要提供一个新的样式对象给 `ZEITUIProvider`，所有的组件都会自然变化以适应你自定义的属性。
|
||||
这里有 <Link target="_blank" pure color href="https://github.com/zeit-ui/react/tree/master/examples/custom-themes">一个完整的示例项目</Link> 可供参考。
|
||||
|
||||
|
||||
当然，如果一个组件未使用到你自定义的变量，它不会发生任何变化也不会重新渲染。
|
||||
|
||||
|
||||
Reference in New Issue
Block a user