styled-components.com Open in urlscan Pro
76.76.21.98 Public Scan

Back to summary

URL:
https://styled-components.com/
Submission: On October 12 via manual (October 12th 2022, 1:01:06 am UTC) from US — Scanned from US

Form analysis
1 forms found in the DOM

<form class="Search__Wrapper-sc-1u91ay0-1 bfTLFQ"><label for="docs-search-input" class="Search__Button-sc-1u91ay0-3 OjlDB"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
      class="StyledIconBase-ea9ulj-0 fHrGFt Search__StyledSearchIcon-sc-1u91ay0-0 cSFCOb">
      <path fill="none" d="M0 0h24v24H0z"></path>
      <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
    </svg></label><span class="algolia-autocomplete" style="position: relative; display: inline-block; direction: ltr;"><input type="search" id="docs-search-input" placeholder="Search docs ..." class="Search__Input-sc-1u91ay0-2 kjAOhc ds-input"
      autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-label="search input" aria-owns="algolia-autocomplete-listbox-0" dir="auto" style="position: relative; vertical-align: top;">
    <pre aria-hidden="true"
      style="position: absolute; visibility: hidden; white-space: pre; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: normal; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre>
    <span class="ds-dropdown-menu" role="listbox" id="algolia-autocomplete-listbox-0" style="position: absolute; top: 100%; z-index: 100; display: none; left: 0px; right: auto;">
      <div class="ds-dataset-1"></div>
    </span>
  </span></form>

Text Content

DocumentationShowcaseEcosystemReleases
spectrum
DocumentationShowcaseEcosystemReleases
spectrum


VISUAL PRIMITIVES FOR THE COMPONENT AGE.


USE THE BEST BITS OF ES6 AND CSS TO STYLE YOUR APPS WITHOUT STRESS 💅🏾

GitHubDocumentation
const Button = styled.a` /* This renders the buttons above... Edit me! */
display: inline-block; border-radius: 3px; padding: 0.5rem 0; margin: 0.5rem
1rem; width: 11rem; background: transparent; color: white; border: 2px solid
white; /* The GitHub button is a primary button * edit this to target it
specifically! */ ${props => props.primary && css` background: white; color:
black; `} `
const Button = styled.a`
  /* This renders the buttons above... Edit me! */
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;


  /* The GitHub button is a primary button
   * edit this to target it specifically! */
  ${props => props.primary && css`
    background: white;
    color: black;
  `}
`

Used by folks at




To create beautiful websites like these


Zillow

The Internet Movie Database

Gizmodo

Spotify

Wish

Target
Discover more


GETTING STARTED


INSTALLATION

To download styled-components run:

npm install --save styled-components

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.


YOUR FIRST STYLED COMPONENT

Let's say you want to create a simple and reusable <Button /> component that you
can use throughout your application. There should be a normal version and a big
and primary version for the important buttons. This is what it should look like
when rendered: (this is a live example, click on them!)

Normal buttonPrimary button

First, let's import styled-components and create a styled.button:

import styled from 'styled-components'


const Button = styled.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!

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
`

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:

import styled, { css } from 'styled-components'


const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;


  ${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.

That's all, we're done! Take a look at our finished component:

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0.5em 1em;
  padding: 0.25em 1em;

  ${props => props.primary && css`
    background: palevioletred;
    color: white;
  `}
`;

const Container = styled.div`
  text-align: center;
`

render(
  <Container>
    <Button>Normal Button</Button>
    <Button primary>Primary Button</Button>
  </Container>
);
const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0.5em 1em;
  padding: 0.25em 1em;


  ${props => props.primary && css`
    background: palevioletred;
    color: white;
  `}
`;


const Container = styled.div`
  text-align: center;
`


render(
  <Container>
    <Button>Normal Button</Button>
    <Button primary>Primary Button</Button>
  </Container>
);

Normal ButtonPrimary Button

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:


CONTINUE ON THE NEXT PAGE


DOCUMENTATION


Hosted on ▲ Vercel
Made with by @glenmaddern, @mxstbr, @_philpl‬, @probablyup, @imbhargav5 and
contributors.
#BlackLivesMatter ✊🏿 Support the Equal Justice Initiative

styled-components.com Open in urlscan Pro 76.76.21.98 Public Scan

Form analysis 1 forms found in the DOM

Text Content

styled-components.com Open in urlscan Pro
76.76.21.98 Public Scan

Form analysis
1 forms found in the DOM