-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
example: add with styled-components (umijs#471)
Showing
8 changed files
with
602 additions
and
826 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import React from 'react'; | ||
import { createGlobalStyle } from 'styled-components'; | ||
|
||
const GlobalStyle = createGlobalStyle` | ||
body { | ||
width: 100%; | ||
height: 100vh; | ||
font-family: 'Lucida Sans', sans-serif; | ||
margin: 0; | ||
} | ||
`; | ||
|
||
export const GlobalStyles: React.FC = (props) => ( | ||
<> | ||
<GlobalStyle /> | ||
{props.children} | ||
</> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
import React from 'react'; | ||
import { GlobalStyles } from './Global'; | ||
|
||
export function rootContainer(container: any, opts: any) { | ||
return React.createElement(GlobalStyles, opts, container); | ||
} | ||
|
||
export function innerProvider(container: any) { | ||
return React.createElement(Foo, { title: 'innerProvider' }, container); | ||
} | ||
|
||
export function i18nProvider(container: any) { | ||
return React.createElement(Foo, { title: 'i18nProvider' }, container); | ||
} | ||
|
||
export function dataflowProvider(container: any) { | ||
return React.createElement(Foo, { title: 'dataflowProvider' }, container); | ||
} | ||
|
||
export function outerProvider(container: any) { | ||
return React.createElement(Foo, { title: 'outerProvider' }, container); | ||
} | ||
|
||
function Foo(props: any) { | ||
return <div>{props.children}</div>; | ||
} |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
{ | ||
"name": "@example/with-styled-components", | ||
"private": true, | ||
"scripts": { | ||
"build": "umi build", | ||
"dev": "umi dev", | ||
"start": "npm run dev" | ||
}, | ||
"dependencies": { | ||
"styled-components": "^5.3.3", | ||
"umi": "4.0.0-rc.6" | ||
}, | ||
"devDependencies": { | ||
"@types/styled-components": "^5.1.24" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
import styled from 'styled-components'; | ||
import { | ||
Wrapper, | ||
Container, | ||
Title, | ||
BounceText, | ||
Padding, | ||
HoverText, | ||
MediaText, | ||
medias, | ||
} from './style'; | ||
|
||
export default function HomePage(props) { | ||
return ( | ||
<Wrapper> | ||
<Container column> | ||
<Title>UmiJS x Styled-components</Title> | ||
</Container> | ||
<HoverText> | ||
This is css string example. Hover to change color to white. | ||
</HoverText> | ||
<MediaText> | ||
This is css media example. color default green <br /> {medias[1]} change | ||
to #2eabff <br /> {medias[0]} change to hotpink | ||
</MediaText> | ||
<Padding top={100}> | ||
<BounceText>This is animation example. bouncing text!</BounceText> | ||
</Padding> | ||
</Wrapper> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,76 @@ | ||
import styled, { keyframes } from 'styled-components'; | ||
|
||
export const Wrapper = styled.section({ | ||
textAlign: 'center', | ||
}); | ||
|
||
export const Container = styled.div<{ | ||
column?: boolean; | ||
}>((props) => ({ | ||
display: 'flex', | ||
alignItems: 'center', | ||
flexDirection: (props.column && 'column') || 'row', | ||
})); | ||
|
||
export const Title = styled.h1` | ||
font-size: 32px; | ||
`; | ||
|
||
export const bounce = keyframes` | ||
from, 20%, 53%, 80%, to { | ||
transform: translate3d(0,0,0); | ||
} | ||
40%, 43% { | ||
transform: translate3d(0, -30px, 0); | ||
} | ||
70% { | ||
transform: translate3d(0, -15px, 0); | ||
} | ||
90% { | ||
transform: translate3d(0,-4px,0); | ||
} | ||
`; | ||
|
||
export const BounceText = styled.div` | ||
animation: ${bounce} 1s ease infinite; | ||
`; | ||
|
||
export const Padding = styled.div<{ | ||
top?: number; | ||
right?: number; | ||
bottom?: number; | ||
left?: number; | ||
}>((props) => ({ | ||
paddingTop: `${props.top || 0}px`, | ||
paddingRight: `${props.right || 0}px`, | ||
paddingBottom: `${props.bottom || 0}px`, | ||
paddingLeft: `${props.left || 0}px`, | ||
})); | ||
|
||
export const breakpoints = [576, 768, 992, 1200]; | ||
|
||
export const medias = breakpoints.map((bp) => `@media (min-width: ${bp}px)`); | ||
|
||
export const HoverText = styled.div` | ||
margin-top: 100px; | ||
padding: 32px; | ||
background-color: #2eabff; | ||
font-size: 24px; | ||
&:hover { | ||
color: white; | ||
} | ||
`; | ||
|
||
export const MediaText = styled.div({ | ||
marginTop: 100, | ||
color: 'green', | ||
[medias[0]]: { | ||
color: 'hotpink', | ||
}, | ||
[medias[1]]: { | ||
color: '#2eabff', | ||
}, | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
# with-styled-components | ||
|
||
An example of using [UmiJS](https://umijs.org/zh-CN) with [with-styled-components](https://styled-components.com/). |
Large diffs are not rendered by default.
Oops, something went wrong.