4aa2fdbb3b
wip Add gitignore and edit rollup config Update gitignore Wip WIP Get rid of older json files and use js files to extend across pkgs later Make test:native work again, thanks to @SimenB No haste and get integration test to work Update husky Update package.json Update travis and appveyor Add lint script Update sandbox Update yarn version Move eslint into sc package Remove unnecessary files Update lint-staged Update CONTRIBUTING.md Update version in lerna.json Update contributing Update scripts Update contributing Update contributing Update contributing.md and publish script Update contributing v4.1.4-alpha.0 Update package json Update lerna version v4.1.4-alpha.0 v4.1.4-alpha.1 Independent version for sandbox and styled-components Yarn instead of npm Add readme to styled-components package to show up on npm Publish - styled-components@4.1.4-alpha.2 Update prepublisOnly and contributing Update gitignore Publish - styled-components@4.1.4-alpha.3 Test without readme Remove readme Publish - styled-components@4.1.4-alpha.4 Copy readme prepublishOnly Publish - styled-components@4.1.4-alpha.5
Utilising tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allows you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!
styled-components is compatible with both React (for web) and React Native – meaning it's the perfect choice even for truly universal apps! See the documentation about React Native for more information.
Supported by Front End Center. Thank you for making this possible!
Docs
See the documentation at styled-components.com/docs for more information about using styled-components!
Quicklinks to some of the most-visited pages:
Example
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;
`;
// Use them like any other React component – except they're styled!
<Wrapper>
<Title>Hello World, this is my first styled component!</Title>
</Wrapper>
This is what you'll see in your browser:
Babel Macro
If you're using tooling that has babel-plugin-macros set up, you can switch to the styled-components/macro import path instead to gain the effects of the babel plugin without further setup.
import styled from 'styled-components/macro';
// A static className will be generated for Title (important for SSR)
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
If you wish to provide configuration options to the babel plugin similar to how you would in a .babelrc, see this guide. The config name is "styledComponents".
Built with styled-components
A lot of hard work goes into community libraries, projects, and guides. A lot of them make it easier to get started or help you with your next project! There’s also a whole lot of interesting apps and sites that people have built using styled-components.
Make sure to head over to awesome-styled-components to see them all! And please contribute and add your own work to the list so others can find it.
Contributing
If you want to contribute to styled-components please see our contributing and community guidelines, they'll help you get set up locally and explain the whole process.
Please also note that all repositories under the styled-components organization follow our Code of Conduct, make sure to review and follow it.
Badge
Let everyone know you're using styled-components → 
[](https://github.com/styled-components/styled-components)
Contributors
This project exists thanks to all the people who contribute. [Contribute].
Backers
Thank you to all our backers! 🙏 [Become a backer]
Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]
License
Licensed under the MIT License, Copyright © 2016-present Glen Maddern and Maximilian Stoiber.
See LICENSE for more information.
Acknowledgements
This project builds on a long line of earlier work by clever folks all around the world. We'd like to thank Charlie Somerville, Nik Graf, Sunil Pai, Michael Chan, Andrey Popp, Jed Watson & Andrey Sitnik who contributed ideas, code or inspiration.
Special thanks to @okonet for the fantastic logo.