TIL 24 | styled-components

6441 ワード
React TIL テキストリンク
Styled-Component
Styled ComponentはReactのコンポーネントベースの開発環境で造形用CSSの性能を向上させるために誕生した.Styled Componentを使用すると、既存のCSS構文を使用してスタイル属性を追加したReactコンポーネントを作成することもできます.
私たちが以前学んだJavaScriptやCSSとはあまり違いません.JavaScriptで変数を宣言するように(またはreactでコンポーネントを作成する)、Buttonを作成し、tagの属性(ここではa tag)を定義し、back-track(`)で既存のCSS構文を使用してスタイル属性を定義すればよい.
スタイル→コンポーネントコードの例
const Button = styled.a`
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
`;
styled-conentsの特性

  • Automatic critical CSS
    Styled Componentは、画面でレンダリングされた構成部品を追跡し、これらの構成部品にスタイルを自動的に挿入します.したがって、コードを適切に割り当てることで、ユーザーがアプリケーションを使用するときに、画面に最小限のコードしか表示されないことを保証できます.

  • No class name bugs
    Styled Componentは独自のclassNameを作成します.これにより、classNameの重複またはエラーによるエラーを低減できます.

  • Easier deletion of CSS
    CSSファイルでclassNameを検索して、無効または削除された構成部品に対応するスタイルプロパティを削除する必要があります.ただし、Styled Componentのすべてのスタイル属性は特定の構成部品に関連付けられているため、構成部品を使用せずに削除すると、スタイル属性も削除されます.

  • Simple dynamic styling
    これは、classNameを手動で管理する必要がなく、Reactのpropsまたはグローバル属性に基づいて構成部品にスタイル属性を付与する単純で直感的です.

  • Painless maintenance
    他のCSSファイルを検索するために継承スタイルから構成部品への属性を検索する必要がないため、コードが大きくなっても維持は難しくありません.

  • Automatic vendor prefixing
    各構成部品に既存のCSSを使用するスタイル属性を定義するだけでいいです.その他はStyled Componentで処理します.
    • 動作中に構成部品が20～30個を超えると、classNameがオーバーラップし、他の奇妙な構成部品に不要なスタイルが突然適用される可能性があります.この場合、classNameを検索、変更、削除、および変更...多くの不便をもたらす.
    styled-conentsを使用すると、このような不便を解消することができます.
    使用方法

  • 端末インストールstyled-componsesを入力します.
    yarn add styled-components
    npm install styled-components

  • 上にimportがあります.
    • import styled from 'styled-components'
  • style-component構文.
    • //box라는 이름을 가지고, padding 20px을 가진 div 이다.
let Box = styled.div`
  padding : 20px;
`;

function Detail(){
  return (
    <div>
      <HTML 많은 곳/> 
      <Box></Box> 
    //이런식으로 component처럼 사용해 주면 된다. 끗.
    </div>
  )
}
  • アイテムを転送して使用することもできます.
    似たようなスタイルのタイトルラベルが必要ですが、異なるフォント色しか必要ありませんか?propsを彼に渡して使いましょう.
    「」、{}を使用して転送できます.
    • let 제목 = styled.h4`
  font-size : 25px;
  color : ${ props => props.color };
`;

function Detail(){
  return (
    <div>
      <HTML 많은 곳/>
      <박스>
        <제목 color="blue">안녕하세요1</제목>
        <제목 color={'red'}>안녕하세요2</제목>
      </박스>
    </div>
  )
}
    TIL Qオブジェクトとは?
    AspにNet MVCおよびWebApiルーティング優先度の追加