const Button = styled.a<{ $primary?: boolean; }>`
  --accent-color: white;


  /* This renders the buttons above... Edit me! */
  background: transparent;
  border-radius: 3px;
  border: 1px solid var(--accent-color);
  color: var(--accent-color);
  display: inline-block;
  margin: 0.5rem 1rem;
  padding: 0.5rem 0;
  transition: all 200ms ease-in-out;
  width: 11rem;


  &:hover {
    filter: brightness(0.85);
  }


  &:active {
    filter: brightness(1);
  }


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

はじめに

インストール

styled-componentsをダウンロードするには、以下を実行します

npm install styled-components

これだけで完了です。これであなたのアプリで使えるようになりました！（そう、ビルドステップは不要です👌）

初めてのstyled component

アプリケーション全体で使用できるシンプルで再利用可能な<Button />コンポーネントを作成したいとします。通常のバージョンと、重要なボタン用の大きくてprimaryバージョンが必要です。レンダリングすると以下のようになります。（これはライブの例です。クリックしてみてください！）

まず、styled-componentsをインポートし、styled.buttonを作成しましょう

import styled from 'styled-components'


const Button = styled.button``

ここのButton変数は、他のReactコンポーネントと同じように使用できるReactコンポーネントです。この珍しいバッククォート構文は、タグ付きテンプレートリテラルと呼ばれる新しいJavaScriptの機能です。

括弧を使って関数を呼び出すことができることはご存知でしょう？ (myFunc()) さて、バッククォートで関数を呼び出すこともできます！（タグ付きテンプレートリテラルの詳細）

もし今、私たちの素敵なコンポーネントを（他のコンポーネントのように： <Button />）レンダリングすると、以下のようになります。

ボタンがレンダリングされました！しかし、これはあまり良いボタンではありませんね😕 これよりもっと良くできるはずです。少しスタイリングして、その中に隠された美しさを引き出してみましょう！

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

ご覧のとおり、styled-componentsを使用すると、JavaScriptで実際のCSSを記述できます。これは、メディアクエリ、すべての疑似セレクター、ネストなど、使用し愛しているCSSのすべての機能を使用できることを意味します（ただし、これらに限定されません）。

最後のステップは、プライマリボタンがどのように見えるかを定義する必要があることです。それを行うには、styled-componentsから{ css }をインポートし、コンポーネントのpropsが渡される関数をテンプレートリテラルに挿入します。

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


const Button = styled.button<{ $primary?: boolean; }>`
  background: transparent;
  border-radius: 3px;
  border: 2px solid #BF4F74;
  color: '#BF4F74';
  margin: 0 1em;
  padding: 0.25em 1em;


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

ここでは、$primaryプロパティが設定されている場合に、コンポーネントにさらにcssを追加し、この場合は背景と色を変更したいと述べています。

これで完了です！完成したコンポーネントを見てください。

const Button = styled.button<{ $primary?: boolean; }>`
  background: transparent;
  border-radius: 3px;
  border: 2px solid #BF4F74;
  color: #BF4F74;
  margin: 0.5em 1em;
  padding: 0.25em 1em;


  ${props => props.$primary && css`
    background: #BF4F74;
    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<{ $primary?: boolean; }>`
  background: transparent;
  border-radius: 3px;
  border: 2px solid #BF4F74;
  color: #BF4F74;
  margin: 0.5em 1em;
  padding: 0.25em 1em;

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

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

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

いいね😍 これもライブ更新エディターなので、実際にstyled-componentsを操作する感覚を掴むために少し試してみてください！準備ができたら、ドキュメントを読んで、styled-componentsができるすべてのクールなことについて学んでください。

次のページに進む

ドキュメント