styled-components、ReactでCSSを処理する最新の方法

投稿日: 2022-04-20 2022-10-07
タグ: React

Reactを使用すると、CSS-in-JSを使用したスタイリングの処理に関して多くの選択肢があります。 CSS-in-JS Roundup で、利用可能な多くのオプションについて学ぶことができます。

ほとんどのライブラリにはライフサイクルがあります。それらは人気が高まり、その後、より良いソリューションに取って代わられます。

人気のピークにあるライブラリの1つは、💅styled-componentsです。

簡単に始められる

styled-componentsの作成者は、Reactプロジェクトを設定する最も一般的な方法の1つであるreact-boilerplateのメンテナーでもあります。

ボイラープレートにはスタイル付きコンポーネントが含まれており、新しいアプリを最初から開始する場合は、ボイラープレートを使用するのが理にかなっています。

開始するには、リポジトリのクローンを作成します。

$ git clone --depth=1 https://github.com/react-boilerplate/react-boilerplate.git

…その後 cd それに入れて実行します npm run setup.

ボイラープレートは、スタイル付きコンポーネントへの飛び込みを開始するのに非常に便利なサンプルアプリを提供します。

ジャンプスタート npm start、 http：// localhost：3000でアプリにアクセスします。

サンプルアプリのコンポーネントは、すでにstyled-componentsを使用しています。見る app/containers/App/index.js 例：

app / containers / App / index.js

// ...other imports
import styled from 'styled-components';

const AppWrapper = styled.div`
  max-width: calc(768px + 16px * 2);
  /* ... */
`;

export default function App() {
  return (
    <AppWrapper>
      {/* ... */}
    </AppWrapper>
  );
}

これは、 AppWrapper コンテナに関連付けられたスタイル付きコンポーネントであり、ページラッパーのレンダリングを担当します。出力されるDOMは、スタイルが適用されたdiv要素になります。

ボイラープレートはホットリロードを使用するため、何かを微調整してファイルを保存すると、変更がページに適用されます。

カスタムを設定してみてください max-width に 500px:

const AppWrapper = styled.div`
  max-width: 500px;
  /* ... */
`;

ファイルを保存します。

最初のスタイル付きコンポーネントを編集しました。 🎉

クラスを忘れる

ご覧のとおり、編集したスタイルをコンテナにリンクするものはありません。 CSSでスタイルを要素にリンクするために使用するclassNameはありません。

CSSを使用してWebインターフェイスを構築する場合の通常のワークフローは次のとおりです。

一意のクラスまたはID属性を使用してHTML構造を作成します
CSSのクラスまたはIDセレクターを使用して、ページ内の要素をターゲットにします

これには、変更が必要になった場合に備えて、それらの同期を維持する必要があります。また、すべての要素に対応できる命名構造を調査する必要があります。

チームに所属している場合、これは通常、強制するのが難しい命名規則があることを意味します。プロジェクトの初期構造をレイアウトするときではありませんが、迅速な修正を行う場合は簡単にバイパスできます。 styled-componentsは、すべての要素に一意のクラス名を使用して、その場でクラスを作成します。

これにより、ページ全体でクラス名を再利用する場合のように、スタイルが他の要素に漏れることがないことが保証されます。

それはただのCSSです

既存のCSS-in-JSライブラリの中には、JavaScriptオブジェクトの形式でJavaScriptでCSSを記述できるものがあります。これにはある程度の認知的負荷が必要であり、CSSは知っているがJavaScriptは知らない多くの設計者にとって参入障壁となります。

styled-componentsは、JavaScriptテンプレートリテラルに依存して実際のCSSを記述します。これは、CSSファイルから簡単にコピーして貼り付けることができます。

注意すべき唯一のことは、メディアクエリは、次の代わりにセレクターを省略する「特別な構文」を使用することです。

@media (max-width: 700px) {
 .app-wrapper {
    background: white;
 }
}

あなたが書く：

const AppWrapper = styled.div`
  /* ... */
  @media (max-width: 700px) {
    background: white;
  }
`;

それはCSSをより簡単でより良いものにします

styled-componentsは「単なるCSS」ですが、わずかに拡張されたCSSです。

これにより、一般的なCSSプリプロセッサの主な便利さの1つであるCSSネスティングが可能になります。ページ内の画像をめくって、簡単なテストを行いましょう。

const AppWrapper = styled.div`
  max-width: calc(768px + 16px * 2);
  /* ... */

  img {
    transform: scaleX(-1);
  }
`;

また、inline-style-prefixerを使用してベンダープレフィックスを処理します。上記の例では、 transform 生成されたCSSにこれらのベンダープレフィックスを追加します。

.fpcXGq img {
  -webkit-transform: scaleX(-1);
      -ms-transform: scaleX(-1);
          transform: scaleX(-1);
}

コンポーネントをカスタマイズする

右ボタンを青ではなく灰色にしたい場合は、この特定のCSSプロパティを簡単に上書きできます。ボタンは、 HeaderLink の2つのインスタンスであり、 react-router-dom いくつかのスタイルが適用された場合：

/app/components/Header/HeaderLink.js

import { Link } from 'react-router-dom';
import styled from 'styled-components';

export default styled(Link)`
  /* ... */
  border: 2px solid #41ADDD;
  color: #41ADDD;

  /* ... */
`;

さて、灰色のボタンを作成したい場合、それは非常に簡単です：

/app/components/Header/GrayHeaderLink.js

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

const GrayHeaderLink = styled(HeaderLink)`
  color: darkgray;
  border: 2px solid darkgray;
`;

そして今、JSXでこのコンポーネントを使用します。

<NavBar>
 <HeaderLink to="/">
   {/* ...children */}
 </HeaderLink>

 <HeaderLink to="/features">
   {/* ...children */}
 </HeaderLink>
</NavBar>

に：

<NavBar>
 <GrayHeaderLink to="/">
   {/* ...children */}
 </GrayHeaderLink>

 <GrayHeaderLink to="/features">
   {/* ...children */}
 </GrayHeaderLink>
</NavBar>

このアプローチは、コンポーネントを所有していない場合に効果的です。この場合、Linkは react-router-dom パッケージと私たちはそれを制御できませんでした。

そうでなければ、それはさらに簡単です。これはボタンのデフォルトのスタイルです。

app / components / Button / buttonStyles.js

import { css } from 'styled-components';

const buttonStyles = css`
  /* ... */
  border: 2px solid #41addd;
  color: #41addd;

  /* ... */
`;

export default buttonStyles;

cssヘルパーの使用に気付くでしょう。これにより、CSSルール内で補間を使用できるようになります。

テンプレートリテラルに単純な小道具を挿入すると、小道具の値に基づいて色を選択することで、コンポーネントに異なるスタイルを設定できます。

const buttonStyles = css`
  /* ... */

  border: 2px solid ${(props) => props.gray ? 'darkgray' : '#41addd'};
  color: ${(props) => props.gray ? 'darkgray' : '#41addd'};

  /* ... */
`;

次に、 StyledButton コンポーネントは、次のような構文を使用してエクスポートされます。

/app/components/Button/StyledButton.js

import styled from 'styled-components';

import buttonStyles from './buttonStyles';

const StyledButton = styled.button`${buttonStyles}`;

export default StyledButton;

これで、次のように書くだけでボタンを灰色にすることができます。

<StyledButton gray />

もっと詳しく知る

これは氷山の一角です。 styled-componentsを使用すると、はるかに高度な構成を実行できます。

公式ドキュメントでを提供できるすべてのスタイル付きコンポーネントについて学びます。

getdocs

13036