210712 styled-components

2572 ワード

テキストリンク

大量の素子の造形過程において、

誤って重複クラスが作成され、

要素は不要な様式または

を採用する.

cssファイルが長すぎて変更できません.
このような状況は避けられない.

だから、誕生したクラス宣言はなく、直接cssを素子に取り付ける方法!styled-componentsの使用
npm install styed-componentsまたは
糸にスタイルを追加-部品としてインストール

import styled from 'styled-components';

padding이 20px인 divを作ってみます.
letで宣言しますが、構成部品とかなり似ていると思います.

let 박스 = styled.div`   
  padding: 20px;
`;

このようにboxdivをしたら、素子を書くように書けばいいです.

<박스>
 어쩌구저쩌구
</박스>

次にfont-size가 25px인 h4を作ると

let 제목 = styled.h4`
  font-size: 25px;
 `;

ここのタイトル要素にいろいろな色のバージョンが必要なら?propsを使っていろいろなスタイルを試してみましょう.

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

${}は、生成された文字の`(接尾辞記号)に書き込むことができる構文であり、文字の間に関数または変数を挿入するために使用されます.

<박스>
 <제목 색상={'red'}>상세페이지</제목>
 <제목 색상="blue">상세페이지</제목>
</박스>

これによりpropsにblueとredが伝達され,blueとredがそれぞれ組み込まれて素子が生成される.

styled-componentライブラリには、コンポーネントが多ければ多いほどクラスの重複が少なくなるという大きな利点があります.

この問題について(210712 styled-components), 我々は、より多くの情報をここで見つけました https://velog.io/@autumndr3ams/210712-styled-components

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol