kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-03-26 22:42:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(examples): add custom-styles

Browse Source
This commit is contained in:
unix
2020-04-12 08:45:24 +08:00
parent a29707b4aa
commit 38075b7486
7 changed files with 10795 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
examples/custom-styles/README.md Normal file
View File

@@ -0,0 +1,3 @@
## Custom styles

32
examples/custom-styles/package.json Normal file
View File

@@ -0,0 +1,32 @@
{
"name": "custom-styles",
"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.25",
"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-styles/public/index.html Normal file
View 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 styles</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

17
examples/custom-styles/src/home.jsx Normal file
View File

@@ -0,0 +1,17 @@
import React from 'react'
import { Card, Text } from '@zeit-ui/react'
import './style.css'
const Home = () => (
<div className="my-app">
<Card shadow style={{ width: '500px', margin: '100px auto' }}>
<Text className="my-text">Modern and minimalist React UI library.</Text>
<Text type={'success'} style={{ color: '#000' }}>Modern and minimalist React UI library.</Text>
<Text type={'warning'} style={{ color: '#000' }}>Modern and minimalist React UI library. </Text>
<Text type={'error'} style={{ color: '#000' }}>Modern and minimalist React UI library. </Text>
<Text type={'secondary'} style={{ color: '#000' }}>Modern and minimalist React UI library.</Text>
</Card>
</div>
)
export default Home

24
examples/custom-styles/src/index.jsx Normal file
View File

@@ -0,0 +1,24 @@
import React from 'react'
import ReactDom from 'react-dom'
import { ZEITUIProvider, CSSBaseline } from '@zeit-ui/react'
import Home from './home'
const App = () => {
return (
<ZEITUIProvider>
<CSSBaseline />
<Home />
</ZEITUIProvider>
)
}
ReactDom.render(
(
<React.StrictMode>
<App />
</React.StrictMode>
),
document.getElementById('app')
)
export default App

11
examples/custom-styles/src/style.css Normal file
View File

@@ -0,0 +1,11 @@
.my-app .my-text {
font-size: 1rem;
color: #000;
text-transform: uppercase;
display: inline-flex;
width: 100%;
margin: 1rem auto !important;
align-items: center;
justify-content: center;
text-align: center;
}

10697
examples/custom-styles/yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff