mirror of
https://github.com/zhigang1992/styled-components.git
synced 2026-04-28 09:24:31 +08:00
56 lines
1.6 KiB
HTML
56 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Basic Example</title>
|
|
<!-- SSR:CSS -->
|
|
</head>
|
|
<body>
|
|
<h1>Basic Example</h1>
|
|
<div id="container"><!-- SSR:HTML --></div>
|
|
<script src="https://unpkg.com/react@15.3.2/dist/react.min.js"></script>
|
|
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.min.js"></script>
|
|
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom-server.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
|
|
<script src="/styled-components.js"></script>
|
|
<script type="text/babel">
|
|
styled.injectGlobal`
|
|
body {
|
|
font-family: sans-serif;
|
|
}
|
|
`
|
|
|
|
// Create a <Title> react component that renders an <h1> which is
|
|
// centered, palevioletred and sized at 1.5em
|
|
const Title = styled.default.h1`
|
|
font-size: 1.5em;
|
|
text-align: center;
|
|
color: palevioletred;
|
|
animation: ${styled.keyframes`from { opacity: 0; }`} 1s both;
|
|
`;
|
|
|
|
// Create a <Wrapper> react component that renders a <section> with
|
|
// some padding and a papayawhip background
|
|
const Wrapper = styled.default.section`
|
|
padding: 4em;
|
|
background: papayawhip;
|
|
`;
|
|
|
|
class Example extends React.Component {
|
|
render() {
|
|
return (
|
|
<Wrapper>
|
|
<Title>Hello World, this is my first styled component!</Title>
|
|
</Wrapper>
|
|
)
|
|
}
|
|
}
|
|
|
|
ReactDOM.render(
|
|
<Example />,
|
|
document.getElementById('container')
|
|
);
|
|
</script>
|
|
</body>
|
|
</html>
|