mirror of
https://github.com/zhigang1992/styled-components.git
synced 2026-04-29 09:45:54 +08:00
Add first README update
This commit is contained in:
Max
2
LICENSE
2
LICENSE
@@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2016 css-components
|
||||
Copyright (c) 2016 Glen Maddern and Maximilian Stoiber
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
157
README.md
157
README.md
@@ -1,62 +1,107 @@
|
||||
# Styled components
|
||||
|
||||
**This is a work in progress** based off of [this demo](https://github.com/geelen/css-components-demo).
|
||||
The best way to style react apps!
|
||||
|
||||
### Usage
|
||||
|
||||
** This may change at any point but it's pretty 💃 right now so... **
|
||||
|
||||
`npm install -D styled-components`
|
||||
|
||||
```jsx
|
||||
import styled from 'styled-components'
|
||||
|
||||
const Header = styled.header`
|
||||
padding: 4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: papayawhip;
|
||||
|
||||
> * + * {
|
||||
margin: 1rem 0 0 0;
|
||||
}
|
||||
> h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
> h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
`
|
||||
|
||||
const Main = styled.section`
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
`
|
||||
|
||||
const P = styled.p`
|
||||
line-height: 1.4;
|
||||
margin-bottom: 1.5rem;
|
||||
`
|
||||
|
||||
export default () => (
|
||||
<div>
|
||||
<Header>
|
||||
<h1>Styled Components</h1>
|
||||
<h2>They're so rad!</h2>
|
||||
</Header>
|
||||
<Main>
|
||||
<P>
|
||||
Separate those concerns! JSX is for structure, styled.tagName for styling!
|
||||
</P>
|
||||
<P>
|
||||
Just gotta use component names that start with an Uppercase letter and you're good to get started!
|
||||
</P>
|
||||
</Main>
|
||||
</div>
|
||||
)
|
||||
```
|
||||
npm install --save styled-components
|
||||
```
|
||||
|
||||
By Glen Maddern and Max Stoiber.
|
||||
> Note: If you're not using `npm` as your package manager, aren't using a module bundler or aren't sure about either of those jump to [Alternative Installation Methods](#alternative-installation-methods).
|
||||
|
||||
With thanks to Charlie Somerville & lots of others.
|
||||
## Basic Usage
|
||||
|
||||
This is what the basic usage of `styled-components` looks like.
|
||||
|
||||
We create two react components, `<Title>` and `<Wrapper>`, and render them from our `<HelloWorld>` component:
|
||||
|
||||
```JSX
|
||||
import React from 'react';
|
||||
|
||||
import styled from 'styled-components';
|
||||
|
||||
// Create a <Title> react component that renders an <h1> which is centered, palevioletred and sized at 1.5em
|
||||
const Title = styled.h1`
|
||||
font-size: 1.5em;
|
||||
text-align: center;
|
||||
color: palevioletred;
|
||||
`;
|
||||
|
||||
// Create a <Wrapper> react component that renders a <section> with some padding and a papayawhip background
|
||||
const Wrapper = styled.section`
|
||||
padding: 4em;
|
||||
background: papayawhip;
|
||||
`;
|
||||
|
||||
export default function HelloWorld() {
|
||||
// Render these styled components like normal react components. They will pass on all props and work
|
||||
// like normal react components – except they're styled!
|
||||
return (
|
||||
<Wrapper>
|
||||
<Title>Hello World, this is my first styled component!</Title>
|
||||
</Wrapper>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
This is what our `<HelloWorld>` component looks like when rendered:
|
||||
|
||||
<img alt="Screenshot of the above code ran in a browser" src="http://i.imgur.com/wUJpcjY.jpg" />
|
||||
|
||||
*<div align="center"><a href="http://www.webpackbin.com/VyQ9AYHpZ" target="_blank">Live demo</a></div>*
|
||||
|
||||
Styled components pass on all their props. Let's see an example of an `<input>` with a placeholder:
|
||||
|
||||
```JSX
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
// Create an <Input> component that'll render an <input> tag with some styles
|
||||
const Input = styled.input`
|
||||
font-size: 1.25em;
|
||||
padding: 0.5em;
|
||||
margin: 0.5em;
|
||||
color: palevioletred;
|
||||
background: papayawhip;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
`;
|
||||
|
||||
export default function Form() {
|
||||
return (
|
||||
<form>
|
||||
{/* Render a styled input with a placeholder of "@mxstbr" */}
|
||||
<Input placeholder="@mxstbr" type="text" />
|
||||
</form>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
Here's what this looks like in the browser, once empty and once filled in:
|
||||
|
||||
<img alt="Screenshot of the above code ran in a browser" src="http://imgur.com/QoQiSui.jpg" />
|
||||
|
||||
*<div align="center"><a href="http://www.webpackbin.com/EyBu49rab" target="_blank">Live demo</a></div>*
|
||||
|
||||
## Alternative Installation Methods
|
||||
|
||||
If you're not using a module bundler or not using `npm` as your package manager, we also have a global ("UMD") build!
|
||||
|
||||
You can use that via the `unpkg` CDN to get `styled-components`, the URL is `https://unpkg.com/styled-components/dist/styled-components.min.js`.
|
||||
|
||||
To install `styled-components` with bower you'd do:
|
||||
|
||||
```
|
||||
bower install styled-components=https://unpkg.com/styled-components/dist/styled-components.min.js
|
||||
```
|
||||
|
||||
To use it from your HTML, add this at the bottom of your `index.html`, and you'll have access to the global `window.styled` variable:
|
||||
|
||||
```HTML
|
||||
<script src="https://unpkg.com/styled-components/dist/styled-components.min.js" type="text/javascript"></script>
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
Licensed under the MIT License, copyright © 2016 Glen Maddern and Maximilian Stoiber. With thanks to Charlie Somerville & lots of others.
|
||||
|
||||
See [LICENSE](./LICENSE) for more information.
|
||||
|
||||
Reference in New Issue
Block a user