ショッピングモールプロジェクト(styled-connts)

1836 ワード
CSS react.js Toyproject テキストリンク
これはアップル社のスピーチに基づいた文章です.

styled-components


部品が多いと、造形が不便になります.
classファイルまたはCSSファイルの重複作成が長すぎて、修正が困難です.(犬同感)
そのため、素子を作るときに、スタイルをすばやく着こなすことができます.すなわち,素子内にCSSを実装し,CSS in JSとも呼ぶ.
設定
糸添加スタイル-部品またはnpm取付スタイル-部品
必要な構成部品に
import styled from 'styled-components'
変数を作成して構成部品として作成するには、次の操作を行います.
簡単そうに見えますが、ラベルごとにクラス名と変数名を組み合わせているのは似たような労働です.しかし、前述したように、重複エラーなどの問題は、構成部品を製造することによって排除することができる.

propsによる造形


これは想像以上に役に立つようです.もし私が似たような形式のタイトルをいくつかあげたら、時には色を変えたいだけです.では、私はいつも形式全体をコピーして貼り付けて、色の部分だけを変えました.このようにコードは長くなるだけで、propsを使用して重複を最小限に抑えることができます.(回収)
  • ${}は、文字の中間関数または変数を挿入するために、文字を生成する`接尾辞記号に書き込むES 6構文です.
  • props.色というprops変数を追加します.${props.色}だけを追加することはできません.コールバック関数に追加します.

    これにより、色という関数を使用できます.通常のテキストを渡す場合は、「」引用符で使用できます.変数やデータ型を含める場合は、{}カッコで使用できます.
    • <제목 색상="blue"></제목>
<제목 색상={'red'}></제목>
    [エラー]ここではID「null」のPasswordEncoderはマッピングされません
    [バックアップ]1260 DFSとBFS C+(BFS/DFS)