テーマ設定...

styled-componentsは、<ThemeProvider>ラッパーコンポーネントをエクスポートすることで、テーマ設定を完全にサポートしています。このコンポーネントは、コンテキストAPIを介して、その下にあるすべてのReactコンポーネントにテーマを提供します。レンダーツリーでは、すべてのstyled-componentsは、複数レベルの深さであっても、提供されたテーマにアクセスできます。

これを説明するために、Buttonコンポーネントを作成してみましょう。ただし、今回はいくつかの変数をテーマとして渡します。

// Define our button, but with the use of props.theme this time
const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;


  /* Color the border and text with theme.main */
  color: ${props => props.theme.main};
  border: 2px solid ${props => props.theme.main};
`;


// We are passing a default theme for Buttons that arent wrapped in the ThemeProvider
Button.defaultProps = {
  theme: {
    main: "#BF4F74"
  }
}


// Define what props.theme will look like
const theme = {
  main: "mediumseagreen"
};


render(
  <div>
    <Button>Normal</Button>


    <ThemeProvider theme={theme}>
      <Button>Themed</Button>
    </ThemeProvider>
  </div>
);
// Define our button, but with the use of props.theme this time
const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;

  /* Color the border and text with theme.main */
  color: ${props => props.theme.main};
  border: 2px solid ${props => props.theme.main};
`;

// We are passing a default theme for Buttons that arent wrapped in the ThemeProvider
Button.defaultProps = {
  theme: {
    main: "#BF4F74"
  }
}

// Define what props.theme will look like
const theme = {
  main: "mediumseagreen"
};

render(
  <div>
    <Button>Normal</Button>

    <ThemeProvider theme={theme}>
      <Button>Themed</Button>
    </ThemeProvider>
  </div>
);
NormalThemed

関数テーマ...

theme propに関数を渡すこともできます。この関数は、ツリーの上位にある別の<ThemeProvider>からの親テーマを受け取ります。このようにして、テーマ自体をコンテキスト化できます。

この例では、上記のテーマ付きButtonと、2番目のThemeProviderを使用して背景色と前景色を反転した2番目のButtonをレンダリングします。関数invertThemeは上位テーマを受け取り、新しいテーマを作成します。

// Define our button, but with the use of props.theme this time
const Button = styled.button`
  color: ${props => props.theme.fg};
  border: 2px solid ${props => props.theme.fg};
  background: ${props => props.theme.bg};


  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
`;


// Define our `fg` and `bg` on the theme
const theme = {
  fg: "#BF4F74",
  bg: "white"
};


// This theme swaps `fg` and `bg`
const invertTheme = ({ fg, bg }) => ({
  fg: bg,
  bg: fg
});


render(
  <ThemeProvider theme={theme}>
    <div>
      <Button>Default Theme</Button>


      <ThemeProvider theme={invertTheme}>
        <Button>Inverted Theme</Button>
      </ThemeProvider>
    </div>
  </ThemeProvider>
);
// Define our button, but with the use of props.theme this time
const Button = styled.button`
  color: ${props => props.theme.fg};
  border: 2px solid ${props => props.theme.fg};
  background: ${props => props.theme.bg};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
`;

// Define our `fg` and `bg` on the theme
const theme = {
  fg: "#BF4F74",
  bg: "white"
};

// This theme swaps `fg` and `bg`
const invertTheme = ({ fg, bg }) => ({
  fg: bg,
  bg: fg
});

render(
  <ThemeProvider theme={theme}>
    <div>
      <Button>Default Theme</Button>

      <ThemeProvider theme={invertTheme}>
        <Button>Inverted Theme</Button>
      </ThemeProvider>
    </div>
  </ThemeProvider>
);
Default ThemeInverted Theme

styledコンポーネントなしでテーマを取得する...

高階コンポーネントwithTheme経由...

styledコンポーネントの外部（たとえば、大きなコンポーネント内）で現在のテーマを使用する必要がある場合は、高階コンポーネントwithThemeを使用できます。

import { withTheme } from 'styled-components'


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


export default withTheme(MyComponent)

ReactフックuseContext経由

v4

React Hooksで作業している場合は、useContextを使用して、styledコンポーネントの外部から現在のテーマにアクセスすることもできます。

import { useContext } from 'react'
import { ThemeContext } from 'styled-components'


const MyComponent = () => {
  const themeContext = useContext(ThemeContext)


  console.log('Current theme: ', themeContext)
  // ...
}

カスタムフックuseTheme経由

v5

React Hooksで作業している場合は、useThemeを使用して、styledコンポーネントの外部から現在のテーマにアクセスすることもできます。

import { useTheme } from 'styled-components'


const MyComponent = () => {
  const theme = useTheme()


  console.log('Current theme: ', theme)
  // ...
}

theme prop...

theme propを使用して、コンポーネントにテーマを渡すこともできます。

これは、欠落している<ThemeProvider>を回避したり、オーバーライドしたりするのに役立ちます。

// Define our button
const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;


  /* Color the border and text with theme.main */
  color: ${props => props.theme.main};
  border: 2px solid ${props => props.theme.main};
`;


// Define what main theme will look like
const theme = {
  main: "mediumseagreen"
};


render(
  <div>
    <Button theme={{ main: "royalblue" }}>Ad hoc theme</Button>
    <ThemeProvider theme={theme}>
      <div>
        <Button>Themed</Button>
        <Button theme={{ main: "darkorange" }}>Overridden</Button>
      </div>
    </ThemeProvider>
  </div>
);
// Define our button
const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;

  /* Color the border and text with theme.main */
  color: ${props => props.theme.main};
  border: 2px solid ${props => props.theme.main};
`;

// Define what main theme will look like
const theme = {
  main: "mediumseagreen"
};

render(
  <div>
    <Button theme={{ main: "royalblue" }}>Ad hoc theme</Button>
    <ThemeProvider theme={theme}>
      <div>
        <Button>Themed</Button>
        <Button theme={{ main: "darkorange" }}>Overridden</Button>
      </div>
    </ThemeProvider>
  </div>
);
Ad hoc theme
ThemedOverridden

Refs

v4

styledコンポーネントにref propを渡すと、styledターゲットに応じて2つのいずれかが得られます。

• 基礎となるDOMノード（基本要素、たとえばstyled.divをターゲットにしている場合）
• Reactコンポーネントインスタンス（React.Componentから拡張されたカスタムコンポーネントをターゲットにしている場合）

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


class Form extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }


  render() {
    return (
      <Input
        ref={this.inputRef}
        placeholder="Hover to focus!"
        onMouseEnter={() => {
          this.inputRef.current.focus()
        }}
      />
    );
  }
}


render(
  <Form />
);
const Input = styled.input`
  padding: 0.5em;
  margin: 0.5em;
  color: #BF4F74;
  background: papayawhip;
  border: none;
  border-radius: 3px;
`;

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  render() {
    return (
      <Input
        ref={this.inputRef}
        placeholder="Hover to focus!"
        onMouseEnter={() => {
          this.inputRef.current.focus()
        }}
      />
    );
  }
}

render(
  <Form />
);

セキュリティ...

styled-componentsでは、任意の入力を補間として使用できるため、その入力をサニタイズするように注意する必要があります。ユーザー入力をスタイルとして使用すると、攻撃者がアプリケーションに配置できるCSSがユーザーのブラウザで評価される可能性があります。

この例は、悪意のあるユーザー入力がAPIエンドポイントをユーザーの代わりに呼び出すことにつながる可能性があることを示しています。

// Oh no! The user has given us a bad URL!
const userInput = '/api/withdraw-funds'


const ArbitraryComponent = styled.div`
  background: url(${userInput});
  /* More styles here... */
`

非常に注意してください！これは明らかにでっち上げの例ですが、CSSインジェクションは目立たず、悪影響を及ぼす可能性があります。一部のIEバージョンでは、url宣言内で任意のJavaScriptが実行されることさえあります。

JavaScriptからCSSをサニタイズするための新しい標準、CSS.escapeが策定されています。まだブラウザ全体で十分にサポートされていないため、アプリでMathias Bynensによるpolyfillを使用することをお勧めします。

既存のCSS...

styled-componentsを既存のCSSと一緒に使用する場合は、注意すべき実装の詳細がいくつかあります。

styled-componentsは、クラスを持つ実際のスタイルシートを生成し、className propを介してそれらのクラスをstyledコンポーネントのDOMノードに添付します。実行時にドキュメントのheadの最後に生成されたスタイルシートを挿入します。

通常のReactコンポーネントのスタイリング...

styled(MyComponent)表記を使用し、MyComponentが渡されたclassName propをレンダリングしない場合、スタイルは適用されません。この問題を回避するには、コンポーネントが渡されたclassNameをDOMノードに添付していることを確認してください。

class MyComponent extends React.Component {
  render() {
    // Attach the passed-in className to the DOM node
    return <div className={this.props.className} />
  }
}

クラスを持つ既存のスタイルがある場合は、グローバルクラスと渡されたクラスを組み合わせることができます。

class MyComponent extends React.Component {
  render() {
    // Attach the passed-in className to the DOM node
    return <div className={`some-global-class ${this.props.className}`} />
  }
}

特異性の問題...

グローバルクラスとstyledコンポーネントクラスを一緒に適用すると、予期しない結果になる場合があります。同じ特異性を持つ両方のクラスでプロパティが定義されている場合、最後のものが優先されます。

// MyComponent.js
const MyComponent = styled.div`background-color: green;`;


// my-component.css
.red-bg {
  background-color: red;
}


// For some reason this component still has a green background,
// even though you're trying to override it with the "red-bg" class!
<MyComponent className="red-bg" />

上記の例では、styled-componentsはデフォルトで実行時に<head>の最後にスタイルを挿入するため、styledコンポーネントクラスはグローバルクラスよりも優先されます。したがって、そのスタイルは他の単一のクラス名セレクターよりも優先されます。

1つの解決策は、スタイルシートのセレクターの特異性を高めることです。

/* my-component.css */
.red-bg.red-bg {
  background-color: red;
}

サードパーティのスタイルやスクリプトとの競合の回避...

完全に制御できないページにstyled-componentsをデプロイする場合は、コンポーネントのスタイルがホストページのスタイルと競合しないように注意する必要があります。

最も一般的な問題は、特異性が不十分なことです。たとえば、このスタイルルールを持つホストページを考えてみましょう。

body.my-body button {
  padding: 24px;
}

ルールにはクラス名と2つのタグ名が含まれているため、このstyledコンポーネントによって生成される単一のクラス名セレクターよりも特異性が高くなります。

styled.button`
  padding: 16px;
`

コンポーネントをホストページのスタイルから完全に隔離する方法はありませんが、babel-plugin-styled-components-css-namespace を使用することで、スタイルルールの特異性を少なくとも高めることができます。このプラグインを使用すると、すべてのスタイル付きコンポーネントに CSS 名前空間を指定できます。すべてのスタイル付きコンポーネントが id="my-widget" を持つコンテナ内でレンダリングされる場合、良い名前空間は #my-widget のようなものになります。ID セレクタは、クラス名よりも特異性が高いためです。

より稀な問題は、ページ上の styled-components の 2 つのインスタンス間の競合です。これは、styled-components インスタンスを含むコードバンドルで process.env.SC_ATTR を定義することで回避できます。この値は、デフォルトの <style> タグ属性 data-styled（v3 以前は data-styled-components）をオーバーライドし、各 styled-components インスタンスが独自のタグを認識できるようにします。

タグ付きテンプレートリテラル{/* SVGアイコン */}

タグ付きテンプレートリテラルは ES6 の新機能です。カスタム文字列補間ルールを定義できます。これが、スタイル付きコンポーネントを作成できる方法です。

補間を渡さない場合、関数が受け取る最初の引数は、文字列を含む配列です。

// These are equivalent:
fn`some string here`;
fn(['some string here']);

補間を渡すと、配列には渡された文字列が補間の位置で分割されて含まれます。残りの引数は、順番に補間になります。

const aVar = 'good';


// These are equivalent:
fn`this is a ${aVar} day`;
fn(['this is a ', ' day'], aVar);

これは少し扱いにくいですが、styled-components で変数、関数、または mixin（css ヘルパー）を受け取り、それを純粋な CSS にフラット化できることを意味します。

ちなみに、フラット化中に、styled-components は undefined、null、false、または空の文字列（""）と評価される補間を無視します。つまり、短絡評価 を使用して CSS ルールを条件付きで追加できます。

const Title = styled.h1<{ $upsideDown?: boolean; }>`
  /* Text centering won't break if props.$upsideDown is falsy */
  ${props => props.$upsideDown && 'transform: rotate(180deg);'}
  text-align: center;
`;

タグ付きテンプレートリテラルの詳細については、Max Stoiber の記事をご覧ください：💅🏾 styled-components の魔法

サーバーサイドレンダリング

v2+

styled-components は、スタイルシートの再水和により、同時サーバーサイドレンダリングをサポートしています。基本的な考え方は、サーバーでアプリをレンダリングするたびに、ServerStyleSheet を作成し、コンテキスト API を介してスタイルを受け入れるプロバイダーを React ツリーに追加できるということです。

これは、keyframes や createGlobalStyle などのグローバルスタイルに干渉せず、React DOM のさまざまな SSR API で styled-components を使用できます。

ツーリング設定{/* SVGアイコン */}

サーバーサイドレンダリングを確実に実行し、クライアントサイドバンドルが問題なくピックアップするには、babel プラグイン を使用する必要があります。これは、各スタイル付きコンポーネントに決定論的な ID を追加することにより、チェックサムの不一致を防ぎます。詳細については、ツーリングドキュメント を参照してください。

TypeScript ユーザー向けに、TS の第一人者である Igor Oleinikov が、webpack ts-loader / awesome-typescript-loader ツールチェーン用の TypeScript プラグイン を作成しました。これは、同様のタスクを実行します。

可能であれば、babel プラグインは最も頻繁に更新されるため、babel プラグインを使用することをお勧めします。Babel を使用して TypeScript をコンパイルすることができるようになったため、エコシステムのメリットを得るために TS ローダーをオフにして純粋な Babel 実装に切り替える価値があるかもしれません。

例{/* SVGアイコン */}

基本的な API は次のとおりです

import { renderToString } from 'react-dom/server';
import { ServerStyleSheet } from 'styled-components';


const sheet = new ServerStyleSheet();
try {
  const html = renderToString(sheet.collectStyles(<YourApp />));
  const styleTags = sheet.getStyleTags(); // or sheet.getStyleElement();
} catch (error) {
  // handle error
  console.error(error);
} finally {
  sheet.seal();
}

collectStyles メソッドは、要素をプロバイダーでラップします。必要に応じて、このメソッドの代わりに StyleSheetManager プロバイダーを直接使用できます。クライアント側では使用しないでください。

import { renderToString } from 'react-dom/server';
import { ServerStyleSheet, StyleSheetManager } from 'styled-components';


const sheet = new ServerStyleSheet();
try {
  const html = renderToString(
    <StyleSheetManager sheet={sheet.instance}>
      <YourApp />
    </StyleSheetManager>
  );
  const styleTags = sheet.getStyleTags(); // or sheet.getStyleElement();
} catch (error) {
  // handle error
  console.error(error);
} finally {
  sheet.seal();
}

sheet.getStyleTags() は、複数の <style> タグの文字列を返します。CSS 文字列を HTML 出力に追加する際には、これを考慮する必要があります。

または、ServerStyleSheet インスタンスには、React 要素の配列を返す getStyleElement() メソッドもあります。

何らかの理由でレンダリングが失敗した場合、try...catch...finally を使用して、sheet オブジェクトが常にガベージコレクションに使用できるようにすることをお勧めします。sheet.getStyleTags() または sheet.getStyleElement() が呼び出された後にのみ sheet.seal() が呼び出されるようにしてください。そうでない場合、別のエラーがスローされます。

Next.js{/* SVGアイコン */}

Babel を使用する場合{/* SVGアイコン */}

基本的には、カスタムの pages/_document.js を追加する必要があります（ない場合）。次に、ロジックをコピーして、styled-components がサーバーサイドでレンダリングされたスタイルを <head> に挿入します。

最新の使用方法の例については、Next.js リポジトリの 例 を参照してください。

SWC を使用する場合{/* SVGアイコン */}

Next.js は、バージョン 12 以降、SWC と呼ばれる Rust コンパイラを使用しています。babel プラグインを使用していない場合は、代わりに この例 を参照してください。

このバージョンでは、next.config.js ファイルのコンパイラオプションに styledComponents: true, を追加 し、SSR をサポートするために この例 のように _document ファイルを getInitialProps で変更するだけで済みます。

アプリディレクトリ{/* SVGアイコン */}

Next.js v13+ の app/ ディレクトリで定義されたルートの場合、Next.js のドキュメントで説明されているように、レイアウトファイルのいずれかに styled-components レジストリを配置する必要があります。これは styled-components v6+ に依存することに注意してください。また、'use client' ディレクティブが使用されていることにも注意してください。そのため、ページはサーバーサイドでレンダリングされますが、styled-components は引き続きクライアントバンドルに表示されます。

Gatsby{/* SVGアイコン */}

Gatsby には、styled-components のサーバーサイドレンダリングを有効にする公式プラグインがあります。

セットアップと使用方法の手順については、プラグインのページ を参照してください。

ストリーミングレンダリング{/* SVGアイコン */}

styled-components は、ReactDOMServer.renderToNodeStream() で使用するためのストリーミング API を提供しています。ストリーミング実装には 2 つの部分があります

サーバー側

ReactDOMServer.renderToNodeStream は、styled-components がラップする「読み取り可能」ストリームを発行します。HTML のチャンク全体がストリームにプッシュされると、対応するスタイルがレンダリング準備完了になると、スタイルブロックが React の HTML の前に追加され、クライアントブラウザに転送されます。

import { renderToNodeStream } from 'react-dom/server';
import styled, { ServerStyleSheet } from 'styled-components';


// if you're using express.js, you'd have access to the response object "res"


// typically you'd want to write some preliminary HTML, since React doesn't handle this
res.write('<html><head><title>Test</title></head><body>');


const Heading = styled.h1`
  color: red;
`;


const sheet = new ServerStyleSheet();
const jsx = sheet.collectStyles(<Heading>Hello SSR!</Heading>);
const stream = sheet.interleaveWithNodeStream(renderToNodeStream(jsx));


// you'd then pipe the stream into the response object until it's done
stream.pipe(res, { end: false });


// and finalize the response with closing HTML
stream.on('end', () => res.end('</body></html>'));

クライアント側

import { hydrate } from 'react-dom';


hydrate();
// your client-side react implementation

クライアント側の再水和が完了すると、styled-components は通常どおり引き継ぎ、再配置されたストリーミングの後にさらに動的なスタイルを挿入します。

他のコンポーネントを参照する{/* SVGアイコン */}

コンポーネントのスタイリングにコンテキストオーバーライドを適用する方法はたくさんあります。とはいえ、よく知られているターゲティング CSS セレクタパラダイムを準備し、補間で使用できるようにすることなく、簡単に行えることはめったにありません。

styled-componentsは、「コンポーネントセレクタ」パターンを用いることで、このユースケースをきれいに解決します。コンポーネントがstyled()ファクトリ関数によって作成またはラップされると、ターゲティングに使用するための安定したCSSクラスも割り当てられます。これにより、名前付けやセレクタの衝突を回避することなく、非常に強力なコンポジションパターンが可能になります。

実践的な例：ここでは、Iconコンポーネントは、親のLinkがホバーされたときの反応を定義しています。

const Link = styled.a`
  display: flex;
  align-items: center;
  padding: 5px 10px;
  background: papayawhip;
  color: #BF4F74;
`;


const Icon = styled.svg`
  flex: none;
  transition: fill 0.25s;
  width: 48px;
  height: 48px;


  ${Link}:hover & {
    fill: rebeccapurple;
  }
`;


const Label = styled.span`
  display: flex;
  align-items: center;
  line-height: 1.2;


  &::before {
    content: '◀';
    margin: 0 10px;
  }
`;


render(
  <Link href="#">
    <Icon viewBox="0 0 20 20">
      <path d="M10 15h8c1 0 2-1 2-2V3c0-1-1-2-2-2H2C1 1 0 2 0 3v10c0 1 1 2 2 2h4v4l4-4zM5 7h2v2H5V7zm4 0h2v2H9V7zm4 0h2v2h-2V7z"/>
    </Icon>
    <Label>Hovering my parent changes my style!</Label>
  </Link>
);
const Link = styled.a`
  display: flex;
  align-items: center;
  padding: 5px 10px;
  background: papayawhip;
  color: #BF4F74;
`;

const Icon = styled.svg`
  flex: none;
  transition: fill 0.25s;
  width: 48px;
  height: 48px;

  ${Link}:hover & {
    fill: rebeccapurple;
  }
`;

const Label = styled.span`
  display: flex;
  align-items: center;
  line-height: 1.2;

  &::before {
    content: '◀';
    margin: 0 10px;
  }
`;

render(
  <Link href="#">
    <Icon viewBox="0 0 20 20">
      <path d="M10 15h8c1 0 2-1 2-2V3c0-1-1-2-2-2H2C1 1 0 2 0 3v10c0 1 1 2 2 2h4v4l4-4zM5 7h2v2H5V7zm4 0h2v2H9V7zm4 0h2v2h-2V7z"/>
    </Icon>
    <Label>Hovering my parent changes my style!</Label>
  </Link>
);
Hovering my parent changes my style!

色の変更ルールをLinkコンポーネント内にネストすることもできましたが、その場合は、Iconがそのように動作する理由を理解するために両方のルールセットを考慮する必要があります。

注意点

この動作は、Styled Componentsのコンテキスト内でのみサポートされています。次の例では、コンポーネントAがStyled ComponentではなくReact.Componentのインスタンスであるため、Bをマウントしようとすると失敗します。

class A extends React.Component {
  render() {
    return <div />
  }
}


const B = styled.div`
  ${A} {
  }
`

スローされるエラー - Cannot call a class as a function - は、styled componentがコンポーネントを補間関数として呼び出そうとしているために発生します。

ただし、Aをstyled()ファクトリでラップすると、補間が可能になります。ラップされたコンポーネントがclassNameを渡すようにしてください。

class A extends React.Component {
  render() {
    return <div className={this.props.className} />
  }
}


const StyledA = styled(A)``


const B = styled.div`
  ${StyledA} {
  }
`

スタイルオブジェクト

styled-componentsは、文字列の代わりにJavaScriptオブジェクトとしてCSSを記述することをオプションでサポートしています。これは、既存のスタイルオブジェクトがあり、styled-componentsに段階的に移行する場合に特に便利です。

// Static object
const Box = styled.div<{ $background?: string; }>({
  background: '#BF4F74',
  height: '50px',
  width: '50px'
});


// Adapting based on props
const PropsBox = styled.div(props => ({
  background: props.$background,
  height: '50px',
  width: '50px'
}));


render(
  <div>
    <Box />
    <PropsBox $background="blue" />
  </div>
);
// Static object
const Box = styled.div<{ $background?: string; }>({
  background: '#BF4F74',
  height: '50px',
  width: '50px'
});

// Adapting based on props
const PropsBox = styled.div(props => ({
  background: props.$background,
  height: '50px',
  width: '50px'
}));

render(
  <div>
    <Box />
    <PropsBox $background="blue" />
  </div>
);

次のページに続きます

APIリファレンス