動機

styled-componentsは、Reactコンポーネントシステム用のCSSをどのように強化できるかを考えた結果です。単一のユースケースに焦点を当てることで、開発者にとってのエクスペリエンスとエンドユーザーにとっての出力を最適化することができました。

styled-componentsは、開発者向けのエクスペリエンスの向上とは別に、以下を提供します。

• 自動クリティカルCSS：styled-componentsは、ページにどのコンポーネントがレンダリングされているかを追跡し、そのスタイルだけを完全に自動的に挿入します。コード分割と組み合わせることで、ユーザーは必要な最小限のコードをロードすることになります。
• クラス名バグなし：styled-componentsはスタイルに対して一意のクラス名を生成します。重複、オーバーラップ、スペルミスについて心配する必要はありません。
• CSSの削除が容易：クラス名がコードベースのどこかで使用されているかどうかを知るのが難しい場合があります。styled-componentsでは、すべてのスタイル設定が特定のコンポーネントに関連付けられているため、明確になります。コンポーネントが未使用（ツールで検出可能）で削除された場合、そのスタイルもすべて削除されます。
• シンプルな動的スタイル：propsやグローバルテーマに基づいてコンポーネントのスタイルを調整するのは、数十のクラスを手動で管理する必要がなく、簡単で直感的です。
• 痛みのないメンテナンス：コンポーネントに影響を与えるスタイルを見つけるために異なるファイルを検索する必要がないため、コードベースがどれほど大きくてもメンテナンスは簡単です。
• 自動ベンダープレフィックス：CSSを現在の標準に合わせて記述し、残りはstyled-componentsに任せます。

これらの利点はすべて、あなたが知っていて愛しているCSSを個々のコンポーネントにバインドしたまま書き続けることができます。

インストール

styled-componentsのインストールは1つのコマンドで完了し、すぐに使い始めることができます。

# with npm
npm install styled-components

# with yarn
yarn add styled-components

yarnのような、"resolutions" package.jsonフィールドをサポートするパッケージマネージャーを使用する場合は、メジャーバージョン範囲に対応するエントリを追加することを強くお勧めします。これにより、プロジェクトに複数のバージョンのstyled-componentsがインストールされている場合に発生する問題全体を回避できます。

package.json内

{
  "resolutions": {
    "styled-components": "^5"
  }
}

<script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>

const Component = window.styled.div`
  color: red;
`

はじめに

styled-componentsは、タグ付きテンプレートリテラルを使用してコンポーネントのスタイルを設定します。

コンポーネントとスタイルの間のマッピングを削除します。これは、スタイルを定義するときに、実際にはスタイルが添付された通常のReactコンポーネントを作成していることを意味します。

この例では、いくつかのスタイルが添付された、ラッパーとタイトルの2つの簡単なコンポーネントを作成します

// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: #BF4F74;
`;


// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;


// Use Title and Wrapper like any other React component – except they're styled!
render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);
// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: #BF4F74;
`;

// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

// Use Title and Wrapper like any other React component – except they're styled!
render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);
Hello World!

これはライブエディターなので、コードを試して、styled-componentsを操作するのがどのようなものかを感じてください！

propsに基づいた適応

styledコンポーネントのテンプレートリテラルに関数（「インターポレーション」）を渡して、propsに基づいて適応させることができます。

このボタンコンポーネントには、色を変更するプライマリ状態があります。$primary propをtrueに設定すると、背景色とテキストの色が入れ替わります。

const Button = styled.button<{ $primary?: boolean; }>`
  /* Adapt the colors based on primary prop */
  background: ${props => props.$primary ? "#BF4F74" : "white"};
  color: ${props => props.$primary ? "white" : "#BF4F74"};


  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid #BF4F74;
  border-radius: 3px;
`;


render(
  <div>
    <Button>Normal</Button>
    <Button $primary>Primary</Button>
  </div>
);
const Button = styled.button<{ $primary?: boolean; }>`
  /* Adapt the colors based on primary prop */
  background: ${props => props.$primary ? "#BF4F74" : "white"};
  color: ${props => props.$primary ? "white" : "#BF4F74"};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid #BF4F74;
  border-radius: 3px;
`;

render(
  <div>
    <Button>Normal</Button>
    <Button $primary>Primary</Button>
  </div>
);
NormalPrimary

スタイルの拡張

頻繁に、コンポーネントを使用したいが、1つのケースでわずかに変更したい場合があります。ここで、インターポレーションされた関数を渡して、propsに基づいて変更できますが、一度スタイルをオーバーライドするのはかなり手間がかかります。

別のスタイルのスタイルを継承する新しいコンポーネントを簡単に作成するには、styled()コンストラクターでラップするだけです。ここでは、前のセクションのボタンを使用して、色関連のスタイルを追加して拡張した特別なボタンを作成します

// The Button from the last section without the interpolations
const Button = styled.button`
  color: #BF4F74;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid #BF4F74;
  border-radius: 3px;
`;


// A new component based on Button, but with some override styles
const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;


render(
  <div>
    <Button>Normal Button</Button>
    <TomatoButton>Tomato Button</TomatoButton>
  </div>
);
// The Button from the last section without the interpolations
const Button = styled.button`
  color: #BF4F74;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid #BF4F74;
  border-radius: 3px;
`;

// A new component based on Button, but with some override styles
const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

render(
  <div>
    <Button>Normal Button</Button>
    <TomatoButton>Tomato Button</TomatoButton>
  </div>
);
Normal ButtonTomato Button

新しいTomatoButtonは、2つの新しいルールを追加しただけですが、Buttonに似ていることがわかります。

場合によっては、スタイルのあるコンポーネントがレンダリングするタグまたはコンポーネントを変更したい場合があります。これは、たとえば、アンカーリンクとボタンが混在しているが、同じようにスタイルを設定する必要があるナビゲーションバーを作成する場合によくあります。

このような場合は、エスケープハッチがあります。"as"ポリモーフィックpropを使用して、作成したスタイルを受け取る要素を動的に交換できます

const Button = styled.button`
  display: inline-block;
  color: #BF4F74;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid #BF4F74;
  border-radius: 3px;
  display: block;
`;


const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;


render(
  <div>
    <Button>Normal Button</Button>
    <Button as="a" href="#">Link with Button styles</Button>
    <TomatoButton as="a" href="#">Link with Tomato Button styles</TomatoButton>
  </div>
);
const Button = styled.button`
  display: inline-block;
  color: #BF4F74;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid #BF4F74;
  border-radius: 3px;
  display: block;
`;

const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

render(
  <div>
    <Button>Normal Button</Button>
    <Button as="a" href="#">Link with Button styles</Button>
    <TomatoButton as="a" href="#">Link with Tomato Button styles</TomatoButton>
  </div>
);
Normal ButtonLink with Button stylesLink with Tomato Button styles

これは、カスタムコンポーネントでも完全に機能します！

const Button = styled.button`
  display: inline-block;
  color: #BF4F74;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid #BF4F74;
  border-radius: 3px;
  display: block;
`;


const ReversedButton = props => <Button {...props} children={props.children.split('').reverse()} />


render(
  <div>
    <Button>Normal Button</Button>
    <Button as={ReversedButton}>Custom Button with Normal Button styles</Button>
  </div>
);
const Button = styled.button`
  display: inline-block;
  color: #BF4F74;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid #BF4F74;
  border-radius: 3px;
  display: block;
`;

const ReversedButton = props => <Button {...props} children={props.children.split('').reverse()} />

render(
  <div>
    <Button>Normal Button</Button>
    <Button as={ReversedButton}>Custom Button with Normal Button styles</Button>
  </div>
);
Normal Buttonselyts nottuB lamroN htiw nottuB motsuC

あらゆるコンポーネントのスタイル設定

styledメソッドは、渡されたclassName propをDOM要素にアタッチする限り、独自のコンポーネントまたはサードパーティのコンポーネントすべてで完全に機能します。

// This could be react-router-dom's Link for example
const Link = ({ className, children }) => (
  <a className={className}>
    {children}
  </a>
);


const StyledLink = styled(Link)`
  color: #BF4F74;
  font-weight: bold;
`;


render(
  <div>
    <Link>Unstyled, boring Link</Link>
    <br />
    <StyledLink>Styled, exciting Link</StyledLink>
  </div>
);
// This could be react-router-dom's Link for example
const Link = ({ className, children }) => (
  <a className={className}>
    {children}
  </a>
);

const StyledLink = styled(Link)`
  color: #BF4F74;
  font-weight: bold;
`;

render(
  <div>
    <Link>Unstyled, boring Link</Link>
    <br />
    <StyledLink>Styled, exciting Link</StyledLink>
  </div>
);
Unstyled, boring Link
Styled, exciting Link

渡されたprops

styledのターゲットが単純な要素（例：styled.div）である場合、styled-componentsは既知のHTML属性をDOMに渡します。カスタムReactコンポーネント（例：styled(MyComponent)）の場合、styled-componentsはすべてのpropsを渡します。

この例では、React要素の場合と同様に、InputコンポーネントのすべてのpropsがマウントされているDOMノードに渡される方法を示しています。

// Create an Input component that'll render an <input> tag with some styles
const Input = styled.input<{ $inputColor?: string; }>`
  padding: 0.5em;
  margin: 0.5em;
  color: ${props => props.$inputColor || "#BF4F74"};
  background: papayawhip;
  border: none;
  border-radius: 3px;
`;


// Render a styled text input with the standard input color, and one with a custom input color
render(
  <div>
    <Input defaultValue="@probablyup" type="text" />
    <Input defaultValue="@geelen" type="text" $inputColor="rebeccapurple" />
  </div>
);
// Create an Input component that'll render an <input> tag with some styles
const Input = styled.input<{ $inputColor?: string; }>`
  padding: 0.5em;
  margin: 0.5em;
  color: ${props => props.$inputColor || "#BF4F74"};
  background: papayawhip;
  border: none;
  border-radius: 3px;
`;

// Render a styled text input with the standard input color, and one with a custom input color
render(
  <div>
    <Input defaultValue="@probablyup" type="text" />
    <Input defaultValue="@geelen" type="text" $inputColor="rebeccapurple" />
  </div>
);

$inputColor propがDOMに渡されず、typeとdefaultValueが渡されるのはなぜですか？styled関数は、非標準属性を自動的にフィルタリングするのに十分なほどスマートです。

CSSからの移行

Styled Componentsはコンポーネント内でどのように機能しますか？

もしコンポーネントにCSSをインポートすること（例：CSSModulesなど）に慣れているなら、次のようなことをするのに慣れているでしょう。

import React from 'react';
import styles from './styles.css';


export default class Counter extends React.Component {
  state = { count: 0 };


  increment = () => this.setState({ count: this.state.count + 1 });
  decrement = () => this.setState({ count: this.state.count - 1 });


  render() {
    return (
      <div className={styles.counter}>
        <p className={styles.paragraph}>{this.state.count}</p>
        <button className={styles.button} onClick={this.increment}>
          +
        </button>
        <button className={styles.button} onClick={this.decrement}>
          -
        </button>
      </div>
    );
  }
}

Styled Componentは、要素とそれをスタイルするルールの組み合わせであるため、Counter はこのように記述します。

import React from 'react';
import styled from 'styled-components';


const StyledCounter = styled.div`
  /* ... */
`;
const Paragraph = styled.p`
  /* ... */
`;
const Button = styled.button`
  /* ... */
`;


export default class Counter extends React.Component {
  state = { count: 0 };


  increment = () => this.setState({ count: this.state.count + 1 });
  decrement = () => this.setState({ count: this.state.count - 1 });


  render() {
    return (
      <StyledCounter>
        <Paragraph>{this.state.count}</Paragraph>
        <Button onClick={this.increment}>+</Button>
        <Button onClick={this.decrement}>-</Button>
      </StyledCounter>
    );
  }
}

StyledCounter に "Styled" という接頭辞を追加したのは、Reactコンポーネント Counter とStyled Component StyledCounter の名前が衝突しないようにするためですが、React Developer ToolsとWeb Inspectorで簡単に識別できるようにするためです。

Styled Componentsをrenderメソッドの外で定義する

Styled Componentsをrenderメソッドの外で定義することが重要です。そうしないと、すべてのrenderパスで再作成されることになります。renderメソッド内でstyled componentを定義すると、キャッシュが無効になり、レンダリング速度が大幅に低下するため、避けるべきです。

推奨される方法でstyled componentを記述する

const StyledWrapper = styled.div`
  /* ... */
`;


const Wrapper = ({ message }) => {
  return <StyledWrapper>{message}</StyledWrapper>;
};

代わりに

const Wrapper = ({ message }) => {
  // WARNING: THIS IS VERY VERY BAD AND SLOW, DO NOT DO THIS!!!
  const StyledWrapper = styled.div`
    /* ... */
  `;


  return <StyledWrapper>{message}</StyledWrapper>;
};

推奨される読み物: Talia Marcassa は、Styled Components: To Use or Not to Use? で、多くの確かな実践的な洞察や代替案との比較を特徴とする、実際の使用状況に関する優れたレビューを執筆しました。

擬似要素、擬似セレクタ、ネスト

使用しているプリプロセッサであるstylisは、スタイルの自動ネストのためにscssのような構文をサポートしています。

このプリプロセスを通じて、styled-componentsはいくつかの高度なセレクタパターンをサポートしています。

• & 単一のアンパサンドは、コンポーネントのすべてのインスタンスを参照します。これは、広範なオーバーライドを適用するために使用されます。

  const Thing = styled.div.attrs((/* props */) => ({ tabIndex: 0 }))`
    color: blue;
  
  
    &:hover {
      color: red; // <Thing> when hovered
    }
  
  
    & ~ & {
      background: tomato; // <Thing> as a sibling of <Thing>, but maybe not directly next to it
    }
  
  
    & + & {
      background: lime; // <Thing> next to <Thing>
    }
  
  
    &.something {
      background: orange; // <Thing> tagged with an additional CSS class ".something"
    }
  
  
    .something-else & {
      border: 1px solid; // <Thing> inside another element labeled ".something-else"
    }
  `
  
  
  render(
    <React.Fragment>
      <Thing>Hello world!</Thing>
      <Thing>How ya doing?</Thing>
      <Thing className="something">The sun is shining...</Thing>
      <div>Pretty nice day today.</div>
      <Thing>Don't you think?</Thing>
      <div className="something-else">
        <Thing>Splendid.</Thing>
      </div>
    </React.Fragment>
  )
  const Thing = styled.div.attrs((/* props */) => ({ tabIndex: 0 }))`
    color: blue;
  
    &:hover {
      color: red; // <Thing> when hovered
    }
  
    & ~ & {
      background: tomato; // <Thing> as a sibling of <Thing>, but maybe not directly next to it
    }
  
    & + & {
      background: lime; // <Thing> next to <Thing>
    }
  
    &.something {
      background: orange; // <Thing> tagged with an additional CSS class ".something"
    }
  
    .something-else & {
      border: 1px solid; // <Thing> inside another element labeled ".something-else"
    }
  `
  
  render(
    <React.Fragment>
      <Thing>Hello world!</Thing>
      <Thing>How ya doing?</Thing>
      <Thing className="something">The sun is shining...</Thing>
      <div>Pretty nice day today.</div>
      <Thing>Don't you think?</Thing>
      <div className="something-else">
        <Thing>Splendid.</Thing>
      </div>
    </React.Fragment>
  )
  Hello world!
  How ya doing?
  The sun is shining...
  Pretty nice day today.
  Don't you think?
  Splendid.

• && 二重アンパサンドは、コンポーネントの1つのインスタンスを参照します。これは、条件付きスタイルオーバーライドを実行していて、特定のコンポーネントのすべてのインスタンスにスタイルを適用したくない場合に役立ちます。

  const Input = styled.input.attrs({ type: "checkbox" })``;
  
  
  const Label = styled.label`
    align-items: center;
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
  `
  
  
  const LabelText = styled.span`
    ${(props) => {
      switch (props.$mode) {
        case "dark":
          return css`
            background-color: black;
            color: white;
            ${Input}:checked + && {
              color: blue;
            }
          `;
        default:
          return css`
            background-color: white;
            color: black;
            ${Input}:checked + && {
              color: red;
            }
          `;
      }
    }}
  `;
  
  
  render(
    <React.Fragment>
      <Label>
        <Input defaultChecked />
        <LabelText>Foo</LabelText>
      </Label>
      <Label>
        <Input />
        <LabelText $mode="dark">Foo</LabelText>
      </Label>
      <Label>
        <Input defaultChecked />
        <LabelText>Foo</LabelText>
      </Label>
      <Label>
        <Input defaultChecked />
        <LabelText $mode="dark">Foo</LabelText>
      </Label>
    </React.Fragment>
  )
  const Input = styled.input.attrs({ type: "checkbox" })``;
  
  const Label = styled.label`
    align-items: center;
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
  `
  
  const LabelText = styled.span`
    ${(props) => {
      switch (props.$mode) {
        case "dark":
          return css`
            background-color: black;
            color: white;
            ${Input}:checked + && {
              color: blue;
            }
          `;
        default:
          return css`
            background-color: white;
            color: black;
            ${Input}:checked + && {
              color: red;
            }
          `;
      }
    }}
  `;
  
  render(
    <React.Fragment>
      <Label>
        <Input defaultChecked />
        <LabelText>Foo</LabelText>
      </Label>
      <Label>
        <Input />
        <LabelText $mode="dark">Foo</LabelText>
      </Label>
      <Label>
        <Input defaultChecked />
        <LabelText>Foo</LabelText>
      </Label>
      <Label>
        <Input defaultChecked />
        <LabelText $mode="dark">Foo</LabelText>
      </Label>
    </React.Fragment>
  )
  FooFooFooFoo

• && 二重アンパサンド単独には「優先度ブースト」と呼ばれる特別な動作があります。これは、スタイルが競合する可能性がある、styled-componentsとバニラCSSが混在する環境を処理している場合に役立ちます。

  const Thing = styled.div`
     && {
       color: blue;
     }
   `
  
  
   const GlobalStyle = createGlobalStyle`
     div${Thing} {
       color: red;
     }
   `
  
  
   render(
     <React.Fragment>
       <GlobalStyle />
       <Thing>
         I'm blue, da ba dee da ba daa
       </Thing>
     </React.Fragment>
   )
  const Thing = styled.div`
     && {
       color: blue;
     }
   `
  
   const GlobalStyle = createGlobalStyle`
     div${Thing} {
       color: red;
     }
   `
  
   render(
     <React.Fragment>
       <GlobalStyle />
       <Thing>
         I'm blue, da ba dee da ba daa
       </Thing>
     </React.Fragment>
   )
  I'm blue, da ba dee da ba daa

アンパサンドなしでセレクタを記述すると、コンポーネントの子を参照します。

const Thing = styled.div`
  color: blue;


  .something {
    border: 1px solid; // an element labeled ".something" inside <Thing>
    display: block;
  }
`


render(
  <Thing>
    <label htmlFor="foo-button" className="something">Mystery button</label>
    <button id="foo-button">What do I do?</button>
  </Thing>
)
const Thing = styled.div`
  color: blue;

  .something {
    border: 1px solid; // an element labeled ".something" inside <Thing>
    display: block;
  }
`

render(
  <Thing>
    <label htmlFor="foo-button" className="something">Mystery button</label>
    <button id="foo-button">What do I do?</button>
  </Thing>
)
Mystery buttonWhat do I do?

追加のpropsのアタッチ

v2

レンダリングされたコンポーネントまたは要素にいくつかのpropsを渡すだけの不要なラッパーを避けるために、.attrs コンストラクタを使用できます。これにより、コンポーネントに追加のprops（または「属性」）をアタッチできます。

このようにして、たとえば、静的なpropsを要素にアタッチしたり、activeClassNameのようなサードパーティのpropsをReact RouterのLinkコンポーネントに渡したりできます。さらに、より動的なpropsをコンポーネントにアタッチすることもできます。.attrs オブジェクトは、コンポーネントが受け取るpropsを受け取る関数も受け取ります。戻り値も結果のpropsにマージされます。

ここでは、Input コンポーネントをレンダリングし、いくつかの動的および静的な属性をアタッチします。

const Input = styled.input.attrs<{ $size?: string; }>(props => ({
  // we can define static props
  type: "text",


  // or we can define dynamic ones
  $size: props.$size || "1em",
}))`
  color: #BF4F74;
  font-size: 1em;
  border: 2px solid #BF4F74;
  border-radius: 3px;


  /* here we use the dynamically computed prop */
  margin: ${props => props.$size};
  padding: ${props => props.$size};
`;


render(
  <div>
    <Input placeholder="A small text input" />
    <br />
    <Input placeholder="A bigger text input" $size="2em" />
  </div>
);
const Input = styled.input.attrs<{ $size?: string; }>(props => ({
  // we can define static props
  type: "text",

  // or we can define dynamic ones
  $size: props.$size || "1em",
}))`
  color: #BF4F74;
  font-size: 1em;
  border: 2px solid #BF4F74;
  border-radius: 3px;

  /* here we use the dynamically computed prop */
  margin: ${props => props.$size};
  padding: ${props => props.$size};
`;

render(
  <div>
    <Input placeholder="A small text input" />
    <br />
    <Input placeholder="A bigger text input" $size="2em" />
  </div>
);

ご覧のとおり、補間では新しく作成されたpropsにアクセスでき、type 属性は要素に渡されます。

.attrsのオーバーライド

styled componentsをラップする場合、.attrs は最も内側のstyled componentから最も外側のstyled componentに適用されることに注意してください。

これにより、各ラッパーは、stylesheetで後で定義されたCSSプロパティが以前の宣言をオーバーライドするのと同様に、.attrs のネストされた使用をオーバーライドできます。

Input の .attrs が最初に適用され、次に PasswordInput の .attrs が適用されます。

const Input = styled.input.attrs<{ $size?: string }>((props) => ({
	type: 'text',
	$size: props.$size || '1em',
}))`
	border: 2px solid #bf4f74;
	margin: ${(props) => props.$size};
	padding: ${(props) => props.$size};
`;


// Input's attrs will be applied first, and then this attrs obj
const PasswordInput = styled(Input).attrs({
  type: "password",
})`
  // similarly, border will override Input's border
  border: 2px solid aqua;
`;


render(
  <div>
    <Input placeholder="A bigger text input" $size="2em" />
    <br />
    {/* Notice we can still use the size attr from Input */}
    <PasswordInput placeholder="A bigger password input" $size="2em" />
  </div>
);
const Input = styled.input.attrs<{ $size?: string }>((props) => ({
	type: 'text',
	$size: props.$size || '1em',
}))`
	border: 2px solid #bf4f74;
	margin: ${(props) => props.$size};
	padding: ${(props) => props.$size};
`;

// Input's attrs will be applied first, and then this attrs obj
const PasswordInput = styled(Input).attrs({
  type: "password",
})`
  // similarly, border will override Input's border
  border: 2px solid aqua;
`;

render(
  <div>
    <Input placeholder="A bigger text input" $size="2em" />
    <br />
    {/* Notice we can still use the size attr from Input */}
    <PasswordInput placeholder="A bigger password input" $size="2em" />
  </div>
);

これが、PasswordInput が 'password' タイプでありながら、Input の $size 属性を使用している理由です。

アニメーション

@keyframes を使用したCSSアニメーションは、単一のコンポーネントにスコープされているわけではありませんが、名前の衝突を避けるためにグローバルにしたくはありません。そのため、アプリ全体で使用できる一意のインスタンスを生成する keyframes ヘルパーをエクスポートしています。

// Create the keyframes
const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }


  to {
    transform: rotate(360deg);
  }
`;


// Here we create a component that will rotate everything we pass in over two seconds
const Rotate = styled.div`
  display: inline-block;
  animation: ${rotate} 2s linear infinite;
  padding: 2rem 1rem;
  font-size: 1.2rem;
`;


render(
  <Rotate>&lt; 💅🏾 &gt;</Rotate>
);
// Create the keyframes
const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
`;

// Here we create a component that will rotate everything we pass in over two seconds
const Rotate = styled.div`
  display: inline-block;
  animation: ${rotate} 2s linear infinite;
  padding: 2rem 1rem;
  font-size: 1.2rem;
`;

render(
  <Rotate>&lt; 💅🏾 &gt;</Rotate>
);
< 💅🏾 >

Keyframesは使用時に遅延して挿入されます。これは、コード分割できる理由であり、共有スタイルフラグメントにはcss ヘルパーを使用する必要があります。

const rotate = keyframes``


// ❌ This will throw an error!
const styles = `
  animation: ${rotate} 2s linear infinite;
`


// ✅ This will work as intended
const styles = css`
  animation: ${rotate} 2s linear infinite;
`

React Native

styled-componentsは、React Nativeで同じように、また同じimportで使用できます。ExpoのSnackでこの例を試してみてください。

import React from 'react'
import styled from 'styled-components/native'


const StyledView = styled.View`
  background-color: papayawhip;
`


const StyledText = styled.Text`
  color: #BF4F74;
`


class MyReactNativeComponent extends React.Component {
  render() {
    return (
      <StyledView>
        <StyledText>Hello World!</StyledText>
      </StyledView>
    )
  }
}

また、通常は配列となる、より複雑なスタイル（transformなど）や、css-to-react-nativeのおかげで、省略形（marginなど）もサポートしています！

React Nativeでプロパティをどのように記述するかを想像し、それをCSSにどのように転送するかを推測すれば、おそらく正しいでしょう。

const RotatedBox = styled.View`
  transform: rotate(90deg);
  text-shadow-offset: 10px 5px;
  font-variant: small-caps;
  margin: 5px 7px 2px;
`

Web版との違いの一部は、React Nativeがkeyframesまたはグローバルスタイルをサポートしていないため、keyframes および createGlobalStyle ヘルパーを使用できないことです。また、メディアクエリを使用したり、CSSをネストしたりすると、警告が表示されます。

metro bundlerによる簡単な使用法

styled-components/native の代わりに styled-components をimportしたい場合は、resolverMainFields 構成 に "react-native" を含めることができます。これは、デフォルトではmetroでサポートされていましたが（現在、haulでは機能しますが）、ある時点で削除されたようです。