styled-components は、React と React Native でスタイルを記述するためのライブラリです。

このライブラリを使用すると、JavaScript と ES6 のテンプレート文字列構文を使用してコンポーネントのスタイルを定義できます。これにより、スタイルとコンポーネントのロジックを密接に結びつけることができます。以下は styled-components のいくつかの主要な特徴と利点です：

CSS-in-JS: JavaScript 内で CSS を記述でき、スタイルがコンポーネントの一部になります。
スタイルの分離: 各コンポーネントが独自のスタイルを持ち、スタイルの衝突を避けます。
動的なスタイル: コンポーネントのプロパティや状態に応じて動的にスタイルを生成できます。
自動プレフィックス: ブラウザの互換性を確保するために、自動的にプレフィックスを追加します。
再利用性: スタイルをコンポーネントとして再利用でき、コードのメンテナンス性が向上します。

使用例

以下は、styled-components を使用した簡単な例です：

// styled-components をインストール
// npm install styled-components

import styled from 'styled-components';

export const Header = styled.header`
  background: #f8f9fa;
  padding: 1rem;
  text-align: center;
`;

export const Button = styled.button`
  background: ${props => props.primary ? 'blue' : 'white'};
  color: ${props => props.primary ? 'white' : 'blue'};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid blue;
  border-radius: 3px;
`;

export const AppHeaderWrapper = styled.div`
//このした必要なCSSを入れることができる
    position: sticky;
    top: 0;
    z-index: 99;
    background-color: ${(props: any) => props.theme};
    transition: background-color .2s;
    
  .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    span {
      margin-top: 10px;
      cursor: pointer;
    }
  }
  
   .nav-item {
    padding: 15px 20px;
    cursor: pointer;

    i {
      margin-right: 5px;
    }

    &:hover {
      opacity: .8;
      background-color: #333;
    }
  }
`;
// 他のコンポーネントのスタイルも同様に定義

import { Button,Header } from './style';

function App() {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
}

export default App;

MUI の styled ツールと類似。次回MUIのCSS 構築紹介する