Skip to content

Commit

Permalink
example: add with styled-components (umijs#471)
Browse files Browse the repository at this point in the history
cnyballk authored and sorrycc committed Jun 23, 2022
1 parent 92f3913 commit 71ae6ab
Showing 8 changed files with 602 additions and 826 deletions.
18 changes: 18 additions & 0 deletions examples/with-styled-components/Global.tsx
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}
</>
);
26 changes: 26 additions & 0 deletions examples/with-styled-components/app.tsx
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>;
}
Binary file added examples/with-styled-components/favicon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions examples/with-styled-components/package.json
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"
}
}
31 changes: 31 additions & 0 deletions examples/with-styled-components/pages/index.tsx
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>
);
}
76 changes: 76 additions & 0 deletions examples/with-styled-components/pages/style.tsx
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',
},
});
3 changes: 3 additions & 0 deletions examples/with-styled-components/readme.md
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/).
1,258 changes: 432 additions & 826 deletions pnpm-lock.yaml

Large diffs are not rendered by default.

0 comments on commit 71ae6ab

Please sign in to comment.