Professional Documents
Culture Documents
Styled Componenets
Styled Componenets
Use the best bits of ES6 and CSS to style your apps without stress Ὀ
GitHub Documentation
USED BY FOLKS AT
TO CREATE BEAUTIFUL WEBSITES LIKE THESE
Discover more
chat 30 online
Getting started
Installation
To download styled‐components run:
That's all you need to do, you are now ready to use it in your app! ﴾yep, no build step needed ὄ﴿
NOTE
It's recommended ﴾but not required﴿ to also use the styled‐components Babel plugin if you
can. It offers many benefits like more legible class names, server‐side rendering compatibility,
smaller bundles, and more.
Normal button Primary button
This Button variable here is now a React component that you can use like any other React
component! This unusual backtick syntax is a new JavaScript feature called a tagged template
literal.
You know how you can call functions with parenthesis? ﴾myFunc()﴿ Well, now you can also call
functions with backticks! ﴾learn more about tagged template literals﴿
If you render our lovely component now ﴾just like any other component: <Button />﴿ this is what
you get:
I'm a <Button />!
It renders a button! That's not a very nice button though ὡ we can do better than this, let's give
it a bit of styling and tickle out the hidden beauty within!
I'm a styled <Button />
As you can see, styled‐components lets you write actual CSS in your JavaScript. This means you
can use all the features of CSS you use and love, including ﴾but by far not limited to﴿ media
queries, all pseudo‐selectors, nesting, etc.
The last step is that we need to define what a primary button looks like. To do that we also
import { css } from styled-components and interpolate a function into our template literal,
which gets passed the props of our component:
${props 몭
props.$primary &&
css`
background: palevioletred;
color: white;
`};
`
Here we're saying that when the $primary property is set we want to add some more css to our
component, in this case change the background and color.
render(
<Container>
<Button>Normal Button</Button>
<Button $primary>Primary Button</Button>
</Container>
);
Nice ὠ That's a live updating editor too, so play around with it a bit to get a feel for what it's
like to work with styled‐components! Once you're ready, dive into the documentation to learn
about all the cool things styled‐components can do for you:
Hosted on ▲ Vercel
Made with by @glenmaddern, @mxstbr, @_philpl, @probablyup, @imbhargav5 and
contributors.