styled-components

9857 ワード
React テキストリンク
素子が多くなるとcssの作成が難しくなります.
(クラス名が重複し、、、、)
したがって,コンポーネントをcssと混同する必要がある.(css in js)
このとき使用されるのはstyled-compontsというライブラリです.

開始します。


  • 端末に以下の内容を入力してインストールします.
    yarn add styled-components

  • インポート
    import styled from 'styled-components';

    • 使用


    このライブラリは、あらかじめスタイルを構成部品に注入して使用できます.
    次を見よう
    充填divが20 pxのカートリッジ素子.
    import React, { useState } from 'react';
//임포트
import styled from 'styled-components';

// 박스 컴포넌트 생성
let 박스 = styled.div`
  padding : 20px;
`;
// 제목 컴포넌트 생성
let 제목 = styled.h4`
  font-size : 25px;
`;

function Detail(){
  return (
    <div>
      ...
      <박스>
    	<제목>
    		제목입니다
    		</제목>
    	</박스>
    </div>
  )
}

  • div box syledを作るために.divを使用しました.
    タイトルコンポーネントを作成する場合はsyledを使用します.h 4のように使えばいいです.
  • ` ` (백틱) 기호안에는 넣고싶은 css 스타일을 작성한다.

  • 変数として保存する場合は、構成部品として使用できます.

    • propsの使用


    同様の形状のUIが必要な場合.
    たとえば、上記の例のfont-sizeは25 pxですが、色が追加されています.
    // 제목 컴포넌트 생성
let 제목 = styled.h4`
  font-size : 25px;
`;
// 제목2 컴포넌트 생성
let 제목2 = styled.h4`
  font-size : 25px;
  color : red;
`;
    類似したコンポーネントの作成を続けるよりもpropsを使用してモジュール化できます.
    import React, { useState } from 'react';
import styled from 'styled-components';

let 박스 = styled.div`
  padding : 20px;
`;
let 제목 = styled.h4`
  font-size : 25px;
  color : ${ props => props.색상 };
`;

function Detail(){
  return (
    <div>
      ...
      <박스>
        <제목>제목입니다</제목>
      </박스>
    </div>
  )
}

  • 既存のfont-sizeのみのタイトル変数にcolorというスタイルを追加します.

  • カラーバーのprops=>props.色のコードを書きます.書き込みコード{props=>props.色}props=>props.色のコードを書きます.{}構文は、生成文字の (backtic)シンボルで使用可能なES 6構文である.
    変数または関数を{}に挿入し、上記のコードではpropsです.これは,色というprops変数をコールバック関数として加えたものである.
    • このようにモジュール化することで、propsに必要な文字を以下のように送信することができる.
    function Detail(){
  return (
    <div>
      ...
      <박스>
        <제목 색상="blue">안녕하세요1</제목>
        <제목 색상={'red'}>안녕하세요2</제목>
      </박스>
    </div>
  )
}
    上記の例では、色というpropsごとにblueという文字とredという文字が含まれて構成部品を作成します.
    プレビュー画面で、
    こんにちは.
    こんにちは.
    各構成部品はこのように異なる色で表示されます.
    リファレンス
    反応器中でpropsを伝送するには2つの方法を用いることができる.
    <제목 색상="blue"></제목>
<제목 색상={'red'}></제목>
    通常のテキストを転送する場合は、「」引用符で転送し、変数やデータ型を含める場合は{}カッコで書き込み、転送します.
    ディスクシーク時間のテスト
    アップルの購入検証