プライマリ

styled

これはデフォルトのエクスポートです。これは、styled.tagnameヘルパーメソッドを作成するために使用する低レベルのファクトリです。

引数	説明
component / tagname	有効なReactコンポーネントまたは'div'のようなタグ名。

テンプレートリテラルを受け入れ、それをStyledComponentに変換する関数を返します。

// import styled from 'styled-components'


const Button = styled.button`
  background: #BF4F74;
  border-radius: 3px;
  border: none;
  color: white;
`


const TomatoButton = styled(Button)`
  background: tomato;
`


render(
  <>
    <Button>I'm purple.</Button>
    <br />
    <TomatoButton>I'm red.</TomatoButton>
  </>
)
// import styled from 'styled-components'

const Button = styled.button`
  background: #BF4F74;
  border-radius: 3px;
  border: none;
  color: white;
`

const TomatoButton = styled(Button)`
  background: tomato;
`

render(
  <>
    <Button>I'm purple.</Button>
    <br />
    <TomatoButton>I'm red.</TomatoButton>
  </>
)
I'm purple.
I'm red.

このメソッドは、はじめにセクションで紹介されています。

TaggedTemplateLiteral

これは、styledの呼び出しに渡すものです。テンプレートリテラルです。これはES6の言語機能です。詳細については、テンプレートリテラルセクションを参照してください。

入力	説明
ルール	任意のCSSルール（文字列）
補間	これは文字列または関数のいずれかになります。文字列はそのままルールと結合されます。関数は、最初の引数として、styledコンポーネントのpropsを受け取ります。

propsに基づいたスタイリングの調整セクションで、propsに基づいてスタイリングを調整する方法について詳しく説明しています。

補間された関数に渡されるプロパティには、特別なプロパティthemeが追加されます。これは、上位レベルのThemeProviderコンポーネントによって挿入されます。詳細については、テーマ設定のセクションを確認してください。

// import styled from 'styled-components'


const padding = '3em'


const Section = styled.section<{ $background?: string; }>`
  color: white;


  /* Pass variables as inputs */
  padding: ${padding};


  /* Adjust the background from the properties */
  background: ${props => props.$background};
`


render(
  <Section $background="royalblue">
    ✨ Magic
  </Section>
)
// import styled from 'styled-components'

const padding = '3em'

const Section = styled.section<{ $background?: string; }>`
  color: white;

  /* Pass variables as inputs */
  padding: ${padding};

  /* Adjust the background from the properties */
  background: ${props => props.$background};
`

render(
  <Section $background="royalblue">
    ✨ Magic
  </Section>
)
✨ Magic

また、補間からオブジェクトを返したり、オブジェクトを直接入力したりすることもできます。これらはインラインスタイルとして扱われます。ただし、CSS構文には疑似セレクター、メディアクエリ、ネストなどのサポートがあり、オブジェクト構文にはないため、これは強く推奨されません。

StyledComponent

styled Reactコンポーネント。styled.tagnameまたはstyled(Component)をスタイル付きで呼び出すと返されます。

このコンポーネントは任意のpropsを受け取ることができます。有効な属性の場合はHTMLノードに渡し、それ以外の場合は補間された関数にのみ渡します。（テンプレートリテラルを参照）

任意のクラス名をstyledコンポーネントに渡しても問題ありません。styledの呼び出しで定義されたスタイルの隣に適用されます。（例：<MyStyledComp className="bootstrap__btn" />）

.attrs

これは、styledコンポーネントにいくつかのpropsをアタッチするチェーン可能なメソッドです。最初で唯一の引数は、コンポーネントの残りのpropsにマージされるオブジェクトです。attrsオブジェクトは次の値を受け入れます

値	説明
Prop値	これらは、関数を除く任意の型にすることができます。これらは静的なままで、既存のコンポーネントpropsにマージされます。
Propファクトリ	コンポーネントに渡されるpropsを受け取り、値を計算する関数。その後、既存のコンポーネントpropsにマージされます。

別のStyledComponentを返します。

// import styled from 'styled-components'


const Input = styled.input.attrs<{ $padding?: string; $small?: boolean; }>(props => ({
  type: 'text',
  size: props.$small ? 5 : undefined,
}))`
  border-radius: 3px;
  border: 1px solid #BF4F74;
  display: block;
  margin: 0 0 1em;
  padding: ${props => props.$padding};


  ::placeholder {
    color: #BF4F74;
  }
`


render(
  <>
    <Input $small placeholder="Small" />
    <Input placeholder="Normal" />
    <Input $padding="2em" placeholder="Padded" />
  </>
)
// import styled from 'styled-components'

const Input = styled.input.attrs<{ $padding?: string; $small?: boolean; }>(props => ({
  type: 'text',
  size: props.$small ? 5 : undefined,
}))`
  border-radius: 3px;
  border: 1px solid #BF4F74;
  display: block;
  margin: 0 0 1em;
  padding: ${props => props.$padding};

  ::placeholder {
    color: #BF4F74;
  }
`

render(
  <>
    <Input $small placeholder="Small" />
    <Input placeholder="Normal" />
    <Input $padding="2em" placeholder="Padded" />
  </>
)

このコンストラクターの詳細については、追加のpropsのアタッチセクションを参照してください。

"as"ポリモーフィックprop

v4

コンポーネントに適用したすべてのスタイルを保持し、最終的にレンダリングされるものを切り替えたい場合（別のHTMLタグまたは別のカスタムコンポーネント）、"as" propを使用して実行時にこれを行うことができます。

// import styled from "styled-components";


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


render(
  <Component
    as="button"
    onClick={() => alert('It works!')}
  >
    Hello World!
  </Component>
)
// import styled from "styled-components";

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

render(
  <Component
    as="button"
    onClick={() => alert('It works!')}
  >
    Hello World!
  </Component>
)
Hello World!

この種のことは、一部のアイテムがリンクで、一部が単なるボタンである必要があるが、すべて同じようにスタイル設定されている必要があるナビゲーションバーのようなユースケースで非常に役立ちます。

"forwardedAs" prop

v4.3

"as" propも受け入れるstyled() HOCで別のコンポーネントをラップする場合は、"forwardedAs"を使用して、目的のpropをラップされたコンポーネントに渡します。

一時的なprops

v5.1

styledコンポーネントで使用されるpropsが、基になるReactノードに渡されたり、DOM要素にレンダリングされたりするのを防ぎたい場合は、prop名の先頭にドル記号（$）を付けると、一時的なpropになります。

この例では、$draggableはdraggableのようにDOMにレンダリングされません。

const Comp = styled.div`
  color: ${props =>
    props.$draggable || 'black'};
`;


render(
  <Comp $draggable="red" draggable="true">
    Drag me!
  </Comp>
);
const Comp = styled.div`
  color: ${props =>
    props.$draggable || 'black'};
`;

render(
  <Comp $draggable="red" draggable="true">
    Drag me!
  </Comp>
);
Drag me!

shouldForwardProp

v5.1

これは、一時的なpropsよりも動的で粒度の細かいフィルタリングメカニズムです。複数の高階コンポーネントが一緒に構成されており、同じprop名を共有している場合に役立ちます。shouldForwardPropは、Array.filterの述語コールバックによく似ています。テストに失敗したpropは、一時的なpropと同様に、基になるコンポーネントに渡されません。

この例のように、他のチェーン可能なメソッドは常に.withConfigの後に実行する必要があることに注意してください。

const Comp = styled('div').withConfig({
  shouldForwardProp: (prop) =>
      !['hidden'].includes(prop),
}).attrs({ className: 'foo' })`
  color: red;
  &.foo {
    text-decoration: underline;
  }
`;


render(
  <Comp hidden>
    Drag Me!
  </Comp>
);
const Comp = styled('div').withConfig({
  shouldForwardProp: (prop) =>
      !['hidden'].includes(prop),
}).attrs({ className: 'foo' })`
  color: red;
  &.foo {
    text-decoration: underline;
  }
`;

render(
  <Comp hidden>
    Drag Me!
  </Comp>
);
Drag Me!

必要に応じて、shouldForwardPropは、デフォルトのバリデーター関数へのアクセスを提供する2番目のパラメーターを取ることができます。この関数はフォールバックとして使用でき、もちろん、既知のHTML属性に基づいてフィルタリングする述語としても機能します。

ThemeProvider

テーマ設定用のヘルパーコンポーネント。コンテキストAPIを介して、コンポーネントツリーの下にあるすべてのstyledコンポーネントにテーマを挿入します。テーマ設定のセクションを確認してください。

Props	説明
theme	プロバイダーの下にあるstyledコンポーネントのすべての補間にthemeとして挿入されるオブジェクト（またはオブジェクトを返す関数）。

簡単な使い方

// import styled, { ThemeProvider } from 'styled-components'


const Box = styled.div`
  color: ${props => props.theme.color};
`


render(
  <ThemeProvider theme={{ color: 'mediumseagreen' }}>
    <Box>I'm mediumseagreen!</Box>
  </ThemeProvider>
)
// import styled, { ThemeProvider } from 'styled-components'

const Box = styled.div`
  color: ${props => props.theme.color};
`

render(
  <ThemeProvider theme={{ color: 'mediumseagreen' }}>
    <Box>I'm mediumseagreen!</Box>
  </ThemeProvider>
)
I'm mediumseagreen!

ネストされたThemeProviderを使用して外側のテーマを追加または置き換える

// import styled, { ThemeProvider } from 'styled-components'


const Box = styled.div`
  background-color: ${props => props.theme.bg};
  color: ${props => props.theme.color};
`


render(
  <ThemeProvider theme={{ bg: 'white', color: 'mediumseagreen' }}>
    <Box>
      I'm mediumseagreen with a white background!
      <ThemeProvider theme={outerTheme => ({...outerTheme, bg: 'black'})}>
        <Box>I'm mediumseagreen with a black background!</Box>
      </ThemeProvider>
    </Box>
  </ThemeProvider>
)
// import styled, { ThemeProvider } from 'styled-components'

const Box = styled.div`
  background-color: ${props => props.theme.bg};
  color: ${props => props.theme.color};
`

render(
  <ThemeProvider theme={{ bg: 'white', color: 'mediumseagreen' }}>
    <Box>
      I'm mediumseagreen with a white background!
      <ThemeProvider theme={outerTheme => ({...outerTheme, bg: 'black'})}>
        <Box>I'm mediumseagreen with a black background!</Box>
      </ThemeProvider>
    </Box>
  </ThemeProvider>
)
I'm mediumseagreen with a white background!
I'm mediumseagreen with a black background!

css prop

v4

スタイリングを少し適用するためだけに余分なコンポーネントを作成したくない場合があります。css propは、コンポーネントの境界をまだ決定せずにコンポーネントを反復処理する便利な方法です。これは、通常のHTMLタグとコンポーネントの両方で機能し、props、テーマ設定、カスタムコンポーネントに基づいて調整するなど、styledコンポーネントがサポートするすべてをサポートします。

<div
  css={`
    background: papayawhip;
    color: ${props => props.theme.colors.text};
  `}
/>
<Button
  css="padding: 0.5em 1em;"
/>

内部的には、Babelプラグインは、css propを持つすべての要素をstyledコンポーネントに変えます。たとえば、上記のコードは次のようになります

import styled from 'styled-components';


const StyledDiv = styled.div`
  background: papayawhip;
  color: ${props => props.theme.colors.text};
`


const StyledButton = styled(Button)`
  padding: 0.5em 1em;
`


<StyledDiv />
<StyledButton />

インポートを追加する必要さえありません。Babelプラグインが自動的に実行します！（Babelマクロを使用している場合を除く。下記参照）

Babelマクロでの使用法

create-react-app でこれを使用するには、Babel マクロを使用できます。残念ながら、Babel マクロはインポートされたときにのみ実行されるため、インポートを自動的に追加することはできません。上記のコードは、マクロにインポートを手動で追加すれば完全に機能します。

import styled from 'styled-components/macro'


<div
  css={`
    background: papayawhip;
    color: ${props => props.theme.colors.text};
  `}
/>
<Button
  css="padding: 0.5em 1em;"
/>

TypeScriptでの使用

任意の要素の css プロパティで TypeScript エラーが発生するのを防ぐには、@types/styled-components をインストールし、プロジェクト内で次のインポートを一度追加します。

import {} from 'styled-components/cssprop'

詳細については、https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245#issuecomment-446011384 を参照してください。

v6 より高いバージョンを使用している場合は、@types/styled-components をインストールする必要はありません。代わりに、次のようにプロジェクトで CSSProp を直接インポートできます。

import {} from 'react'
import type { CSSProp } from 'styled-components'


declare module 'react' {
  interface Attributes {
    css?: CSSProp | undefined
  }
}

ヘルパー

createGlobalStyle

v4web-only

グローバルスタイルを処理する特別な StyledComponent を生成するヘルパー関数。通常、styled component は自動的にローカル CSS クラスにスコープされ、他のコンポーネントから分離されます。createGlobalStyle の場合、この制限は解除され、CSS リセットやベーススタイルシートなどを適用できます。

引数	説明
TaggedTemplateLiteral	CSS と補間を含むタグ付きテンプレートリテラル。

子を受け入れない StyledComponent を返します。React ツリーの最上位に配置すると、コンポーネントが「レンダリング」されたときにグローバルスタイルが挿入されます。

import { createGlobalStyle } from 'styled-components'


const GlobalStyle = createGlobalStyle<{ $whiteColor?: boolean; }>`
  body {
    color: ${props => (props.$whiteColor ? 'white' : 'black')};
  }
`


// later in your app


<React.Fragment>
  <GlobalStyle $whiteColor />
  <Navigation /> {/* example of other top-level stuff */}
</React.Fragment>

GlobalStyle コンポーネントは StyledComponent であるため、提供されている場合は、<ThemeProvider> コンポーネントからのテーマにもアクセスできます。

import { createGlobalStyle, ThemeProvider } from 'styled-components'


const GlobalStyle = createGlobalStyle<{ $whiteColor?: boolean; }>`
  body {
    color: ${props => (props.$whiteColor ? 'white' : 'black')};
    font-family: ${props => props.theme.fontFamily};
  }
`


// later in your app


<ThemeProvider theme={{ fontFamily: 'Helvetica Neue' }}>
  <React.Fragment>
    <Navigation /> {/* example of other top-level stuff */}
    <GlobalStyle $whiteColor />
  </React.Fragment>
</ThemeProvider>

css

補間を含むテンプレートリテラルから CSS を生成するヘルパー関数。JavaScript でのタグ付きテンプレートリテラルの動作により、補間内に関数を含むテンプレートリテラルを返す場合は、これを使用する必要があります。

文字列を補間する場合は、これを使用する必要はありません。関数を補間する場合のみです。

引数	説明
TaggedTemplateLiteral	CSS と補間を含むタグ付きテンプレートリテラル。

補間の配列を返します。これは、補間自体として渡すことができる平坦化されたデータ構造です。

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


interface ComponentProps {
  $complex?: boolean;
  $whiteColor?: boolean;
}


const complexMixin = css<ComponentProps>`
  color: ${props => (props.$whiteColor ? 'white' : 'black')};
`


const StyledComp = styled.div<ComponentProps>`
  /* This is an example of a nested interpolation */
  ${props => (props.$complex ? complexMixin : 'color: blue;')};
`

css を省略すると、関数は toString() され、期待どおりの結果が得られません。

keyframes

web-only

アニメーションのキーフレームを作成するためのヘルパーメソッド。

引数	説明
TaggedTemplateLiteral	キーフレームを含むタグ付きテンプレートリテラル。

アニメーション宣言で使用されるキーフレームモデルを返します。生成されたアニメーション名を取得する場合は、返されたモデルで getName() API を使用できます。

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


const fadeIn = keyframes`
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`


const FadeInButton = styled.button`
  animation: 1s ${fadeIn} ease-out;
`

スタイルルールを部分的に構成する場合は、必ず css ヘルパーを使用してください。

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


interface AnimationProps {
  $animationLength: number;
}


const pulse = keyframes`
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`


const animation = props =>
  css<AnimationProps>`
    ${pulse} ${props.$animationLength} infinite alternate;
  `


const PulseButton = styled.button<AnimationProps>`
  animation: ${animation};
`

styled-components でのアニメーションの使用方法の詳細については、アニメーションセクションを参照してください。

StyleSheetManager

スタイルの処理方法を変更するためのヘルパーコンポーネント。styled-components を含む特定のサブツリーでは、CSS ランタイムプロセッサ（stylis）がユーザーランドプラグインとオプションオーバーライドを介してスタイルを処理する方法など、さまざまな動作をカスタマイズできます。

Props	説明
disableCSSOMInjection (v5+)	DOM にスタイルを追加するための、より遅いテキストノードベースの CSS インジェクションシステムに切り替えます。CSSOM API からスタイルを使用するようにアップグレードされていないサードパーティツールと統合する場合に役立ちます。
disableVendorPrefixes (v5, v6 で削除)	レンダリングされたコンポーネントのレガシー CSS プロパティを追加しないように、特定のサブツリーをオプトアウトします。
enableVendorPrefixes (v6+)	レンダリングされたコンポーネントのレガシー CSS プロパティを追加するように、特定のサブツリーをオプトインします。
sheet	ここから先は危険地帯です。高度な SSR シナリオで必要な場合は、独自の StyleSheet を作成して提供してください。
stylisPlugins (v5+)	コンパイル中に stylis によって実行されるプラグインの配列。確認してください npm で入手可能なもの .
target	ここから先は危険地帯です。スタイルの情報を挿入する代替 DOM ノードを提供します。

たとえば、アプリがレガシーブラウザー向けである場合は、スタイルのベンダープレフィックスを有効にすることができます

// import styled, { StyleSheetManager } from 'styled-components'


const Box = styled.div`
  color: ${props => props.theme.color};
  display: flex;
`


render(
  <StyleSheetManager enableVendorPrefixes>
    <Box>If you inspect me, there are vendor prefixes for the flexbox style.</Box>
  </StyleSheetManager>
)
// import styled, { StyleSheetManager } from 'styled-components'

const Box = styled.div`
  color: ${props => props.theme.color};
  display: flex;
`

render(
  <StyleSheetManager enableVendorPrefixes>
    <Box>If you inspect me, there are vendor prefixes for the flexbox style.</Box>
  </StyleSheetManager>
)
If you inspect me, there are vendor prefixes for the flexbox style.

別の例としては、ユーザーランド stylis-plugin-rtl プラグインを使用して、スタイルに右から左への変換を有効にすることが挙げられます

// import styled, { StyleSheetManager } from 'styled-components'
// import stylisRTLPlugin from 'stylis-plugin-rtl';


const Box = styled.div`
  background: mediumseagreen;
  border-left: 10px solid red;
`


render(
  <StyleSheetManager stylisPlugins={[stylisRTLPlugin]}>
    <Box>My border is now on the right!</Box>
  </StyleSheetManager>
)
// import styled, { StyleSheetManager } from 'styled-components'
// import stylisRTLPlugin from 'stylis-plugin-rtl';

const Box = styled.div`
  background: mediumseagreen;
  border-left: 10px solid red;
`

render(
  <StyleSheetManager stylisPlugins={[stylisRTLPlugin]}>
    <Box>My border is now on the right!</Box>
  </StyleSheetManager>
)
My border is now on the right!

isStyledComponent

styled component の識別を支援するユーティリティ。

引数	説明
関数	styled component または styled component でラップされた React コンポーネントである可能性のあるすべての関数

渡された関数が、styled components でラップされた有効なコンポーネントクラスである場合に true を返します。コンポーネントセレクターとして使用できるようにコンポーネントをラップする必要があるかどうかを判断するのに役立ちます。

import React from 'react'
import styled, { isStyledComponent } from 'styled-components'
import MaybeStyledComponent from './somewhere-else'


let TargetedComponent = isStyledComponent(MaybeStyledComponent)
  ? MaybeStyledComponent
  : styled(MaybeStyledComponent)``


const ParentComponent = styled.div`
  color: royalblue;


  ${TargetedComponent} {
    color: tomato;
  }
`

withTheme

これは、ThemeProvider から現在のテーマを取得し、それを theme プロップとしてコンポーネントに渡すための高階コンポーネントファクトリです。

引数	説明
コンポーネント	theme プロップを処理できる有効な React コンポーネント。

ラッパー (高階コンポーネント) 内に渡されたコンポーネントを返します。渡されたコンポーネントは、現在のテーマオブジェクトを含む theme プロップを受け取ります。

import { withTheme } from 'styled-components'


class MyComponent extends React.Component {
  render() {
    console.log('Current theme: ', this.props.theme)
    // ...
  }
}


export default withTheme(MyComponent)

useTheme

v5

これは、ThemeProvider から現在のテーマを取得するためのカスタムフックです。

import { useTheme } from 'styled-components'


function MyComponent() {
  const theme = useTheme()
  console.log('Current theme: ', theme)


  // ...
}

ThemeConsumer

v4

これは、React.createContext によって作成された「コンシューマー」コンポーネントであり、ThemeProvider のコンパニオンコンポーネントです。レンダリング中にテーマへの動的なアクセスを許可するために、レンダリングプロップパターンを使用します。

子関数への引数として、現在のテーマ（コンポーネントツリーの上位にあるThemeProviderに基づく）を渡します。この関数から、さらに JSX を返すか、何も返さないことができます。

import { ThemeConsumer } from 'styled-components'


export default class MyComponent extends React.Component {
  render() {
    return (
      <ThemeConsumer>
        {theme => <div>The theme color is {theme.color}.</div>}
      </ThemeConsumer>
    )
  }
}

テストユーティリティ

find

v3

指定された DOM ルート内で、styled component のレンダリングされた DOM ノードの単一インスタンスを検索するための便利なメソッド。

import styled from 'styled-components'
import { find } from 'styled-components/test-utils'


const Foo = styled.div`
  color: red;
`


/**
 * Somewhere in your app:
 *
 * ReactDOM.render(
 *   <main>
 *     <Foo />
 *   </main>, document.body
 * );
 */


// retrieves the first instance of "Foo" in the body (querySelector under the hood)
find(document.body, Foo) // HTMLDivElement | null

findAll

v3

指定された DOM ルート内で、styled component のレンダリングされた DOM ノードのすべてのインスタンスを検索するための便利なメソッド。

import styled from 'styled-components'
import { findAll } from 'styled-components/test-utils'


const Foo = styled.div`
  color: ${props => props.color};
`


/**
 * Somewhere in your app:
 *
 * ReactDOM.render(
 *   <main>
 *     <Foo color="red" />
 *     <Foo color="green" />
 *   </main>, document.body
 * );
 */


// retrieves a NodeList of instances of "Foo" in the body (querySelectorAll under the hood)
findAll(document.body, Foo) // NodeList<HTMLDivElement> | null

enzymeFind

v4

enzyme ラッパー内で、特定の styled component のインスタンスを検索するための便利なメソッド。

import { mount } from 'enzyme'
import styled from 'styled-components'
import { enzymeFind } from 'styled-components/test-utils'


const Foo = styled.div`
  color: red;
`


const wrapper = mount(
  <div>
    <Foo>bar</Foo>
  </div>
)


enzymeFind(wrapper, Foo)

サポートされている CSS

styled-components 内では、CSS とネストをすべてサポートしています。インラインスタイルではなく、実際のスタイルシートを生成するため、CSS で動作するものはすべて styled-components でも動作します。

const Example = styled.div`
  /* all declarations will be prefixed */
  padding: 2em 1em;
  background: papayawhip;


  /* pseudo selectors work as well */
  &:hover {
    background: #BF4F74;
  }


  /* media queries are no problem */
  @media (max-width: 600px) {
    background: tomato;


    /* nested rules work as expected */
    &:hover {
      background: yellow;
    }
  }


  > p {
    /* descendant-selectors work as well, but are more of an escape hatch */
    text-decoration: underline;
  }


  /* Contextual selectors work as well */
  html.test & {
    display: none;
  }
`;


render(
  <Example>
    <p>Hello World!</p>
  </Example>
);
const Example = styled.div`
  /* all declarations will be prefixed */
  padding: 2em 1em;
  background: papayawhip;

  /* pseudo selectors work as well */
  &:hover {
    background: #BF4F74;
  }

  /* media queries are no problem */
  @media (max-width: 600px) {
    background: tomato;

    /* nested rules work as expected */
    &:hover {
      background: yellow;
    }
  }

  > p {
    /* descendant-selectors work as well, but are more of an escape hatch */
    text-decoration: underline;
  }

  /* Contextual selectors work as well */
  html.test & {
    display: none;
  }
`;

render(
  <Example>
    <p>Hello World!</p>
  </Example>
);
Hello World!

アンパサンド (&) は、その styled-component 用に生成された一意のクラス名に置き換えられるため、複雑なロジックを簡単に記述できます。

TypeScript

v6

styled-components は TypeScript の定義を提供しており、IDE での編集エクスペリエンスを強化し、TypeScript プロジェクトの型安全性を向上させます。

宣言ファイルを作成する

styled-components の TypeScript 定義は、定義の v4.1.4 以降、宣言のマージを使用することで拡張できます。

したがって、最初のステップは宣言ファイルを作成することです。たとえば、styled.d.ts という名前を付けましょう。

// import original module declarations
import 'styled-components';


// and extend them!
declare module 'styled-components' {
  export interface DefaultTheme {
    borderRadius: string;


    colors: {
      main: string;
      secondary: string;
    };
  }
}

React-Native

import 'styled-components/native'


declare module 'styled-components/native' {
  export interface DefaultTheme {
    borderRadius: string;


    colors: {
      main: string;
      secondary: string;
    };
  }
}

DefaultTheme は、props.theme のインターフェイスとして標準で使用されています。デフォルトでは、インターフェイス DefaultTheme は空であるため、それを拡張する必要があります。

テーマを作成する

これで、上記のステップで宣言した DefaultTheme を使用するだけでテーマを作成できます。

// my-theme.ts
import { DefaultTheme } from 'styled-components';


const myTheme: DefaultTheme = {
  borderRadius: '5px',


  colors: {
    main: 'cyan',
    secondary: 'magenta',
  },
};


export { myTheme };

コンポーネントのスタイリング

以上です！元のインポートを使用するだけで、styled-components を使用できるようになりました。

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


// theme is now fully typed
export const MyComponent = styled.div`
  color: ${props => props.theme.colors.main};
`;


// theme is also fully typed
export MyGlobalStyle = createGlobalStyle`
  body {
    background-color: ${props => props.theme.colors.secondary};
  }
`;


// and this theme is fully typed as well
export cssHelper = css`
  border: 1px solid ${props => props.theme.borderRadius};
`;

カスタム props の使用

props に基づいてスタイルを調整している場合、およびそれらの props がベースタグ/コンポーネント props の一部でない場合は、次のように型引数を使用して、それらの追加のカスタム props が何であるかを TypeScript に伝えることができます（TypeScript v2.9+ が必要）

import styled from 'styled-components';
import Header from './Header';


interface TitleProps {
  readonly $isActive: boolean;
}


const Title = styled.h1<TitleProps>`
  color: ${(props) => (props.$isActive ? props.theme.colors.main : props.theme.colors.secondary)};
`;

注：標準タグ（上記の例の <h1> など）をスタイリングする場合、styled-components はカスタム props を渡しません（不明な Prop 警告を回避するため）。

ただし、すべてのカスタム props をカスタム React コンポーネントに渡します。

import styled from 'styled-components';
import Header from './Header';


const NewHeader = styled(Header)<{ customColor: string }>`
  color: ${(props) => props.customColor};
`;
// Header will also receive props.customColor

customColor プロパティを Header コンポーネントに転送しない場合は、ドル記号 ($) を先頭に付けることで、一時的な propsを利用できます。

import styled from 'styled-components';
import Header from './Header';


const NewHeader2 = styled(Header)<{ $customColor: string }>`
  color: ${(props) => props.$customColor};
`;
// Header does NOT receive props.$customColor

ユースケースに応じて、カスタム props を自分で抽出することで同様の結果を得ることができます。

import styled from 'styled-components';
import Header, { Props as HeaderProps } from './Header';


const NewHeader3 = styled(({ customColor, ...rest }: { customColor: string } & HeaderProps) => <Header {...rest} />)`
  color: ${(props) => props.customColor};
`;

または、shouldForwardProp を使用します。

import styled from 'styled-components';
import Header from './Header';


const NewHeader4 = styled(Header).withConfig({
  shouldForwardProp: (prop) => !['customColor'].includes(prop),
})<{ customColor: string }>`
  color: ${(props) => props.customColor};
`;

className の注意点

コンポーネントを定義するときは、Props インターフェイスで className をオプションとしてマークする必要があります。

interface LogoProps {
  /* This prop is optional, since TypeScript won't know that it's passed by the wrapper */
  className?: string;
}


class Logo extends React.Component<LogoProps, {}> {
  render() {
    return <div className={this.props.className}>Logo</div>;
  }
}


const LogoStyled = styled(Logo)`
  font-family: 'Helvetica';
  font-weight: bold;
  font-size: 1.8rem;
`;

関数コンポーネントの注意点

関数コンポーネントを使用し、props の型チェックを行うには、コンポーネントをその型とともに定義する必要があります。これは styled-components に特有のものではなく、React の動作方法です。

interface BoxProps {
  theme?: ThemeInterface;
  borders?: boolean;
  className?: string;
}


const Box: React.FunctionComponent<BoxProps> = (props) => <div className={props.className}>{props.children}</div>;


const StyledBox = styled(Box)`
  padding: ${(props) => props.theme.lateralPadding};
`;

以前の API

.extend

これは、新しい StyledComponent を作成し、そのルールを拡張するメソッドです。

引数	説明
TaggedTemplateLiteral	CSS と補間を含むタグ付きテンプレートリテラル。

import styled from 'styled-components'


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


const Component2 = Component.extend`
  background: white;
  color: blue;
`

新しいルールが、このメソッドが呼び出されたコンポーネントのルールにマージされた、新しい StyledComponent を返します。

injectGlobal

グローバル CSS を記述するためのヘルパーメソッドです。コンポーネントは返しませんが、スタイルをスタイルシートに直接追加します。

引数	説明
TaggedTemplateLiteral	グローバルスタイルを中に持つ、タグ付きテンプレートリテラルです。

import { injectGlobal } from 'styled-components'


injectGlobal`
  @font-face {
    font-family: "Operator Mono";
    src: url("../fonts/Operator-Mono.ttf");
  }


  body {
    margin: 0;
  }
`

この使用は推奨しません。必須の場合、1つのファイルに収め、アプリごとに最大1回使用するようにしてください。これはエスケープハッチです。まれな @font-face 定義または body スタイリングにのみ使用してください。

"innerRef" prop

styled-component に ref prop を渡すと、基になる DOM ノードではなく、StyledComponent ラッパーのインスタンスが取得されます。これは、ref の動作方法によるものです。ラッパーで focus のような DOM メソッドを直接呼び出すことはできません。

実際のラップされた DOM ノードへの ref を取得するには、代わりに innerRef prop にコールバックを渡します。

この例では、innerRef を使用して、スタイリングされた入力への ref を保存し、ユーザーがその上にカーソルを置くとフォーカスします。

const Input = styled.input`
  padding: 0.5em;
  margin: 0.5em;
  color: #BF4F74;
  background: papayawhip;
  border: none;
  border-radius: 3px;
`


class Form extends React.Component {
  render() {
    return (
      <Input
        placeholder="Hover here..."
        innerRef={x => {
          this.input = x
        }}
        onMouseEnter={() => this.input.focus()}
      />
    )
  }
}

.withComponent

これは、同じルールを持ちながら、適用されるタグまたはコンポーネントが異なる新しい StyledComponent を作成するメソッドです。

引数	説明
component / tagname	有効なReactコンポーネントまたは'div'のようなタグ名。

新しいタグ/コンポーネントが使用時に適用される、新しい StyledComponent を返します。

次ページに続く

ツール