4月2日TIL

styled-components

通常、Web開発を初めて学ぶと、CSS、SASS、SCSSなどが見つかります.
cssを作成するフォルダまたはファイルは通常別々です.
上記の方法でcssを書くと、次から次へと不便な点が出てきます.
🤔 「名前をつけるたびに難しい…書類も紛らわしい!!」
私が感じた不快感は以下の通りです.
1.classとidの名前を考える.
2.多くのクラスが重なり、コードが長くなるため、希望する部分を見つけるのが難しい.
3.スタイル属性が重複し、所望の位置で所望の結果を得ることができない
styled-conentsはJSのCSSです.
文法を簡単に見てください.

import styled from "styled-components";

const Button = styled.button`
  width: 10px;
  background: red;
  color: white;
  border: 2px solid white;

  ${props => props.color || `
    background: white;
    color: black;
  `}
`

function Sample({ children }) {
  return <Button color={color}>{children}</Button>;
}

この方法でpropsを受信し、条件に応じてスタイルを変更できます.
ご覧のように、コンポーネントごとにスタイルを作成しているので、そのコンポーネントを作成したJSファイルの中で、それをHTML+JS+CSSに統合して、コンポーネント単位で開発することができます.

error

構成部品単位で開発できるため、大量のオーバーラップを回避し、スタイル属性のオーバーラップの問題を低減することができる.
だから今回のプロジェクトでstyled-componsesを選びました!(react使用済み)
しかし、楽しみも一時的に問題になった.😫
(styled-conentsは完全に熟知していない理由です...)

 <MatchesComponent className="matches">
   {matchData &&
        matchData[0].matches.map((value, index) => {
		// ...
          return (
            <section oneTop={+value.player.matchRank}>
             // ...
            </section>
          );
        })}
 </MatchesComponent>

const MatchesComponent = styled.article`
	section {
		border-color: ${props =>
    	props.oneTop === 99
      	? '#f2f2f2 #f2f2f2 #f2f2f2 #f62459'
      	: props.oneTop === 1
      	? '#f2f2f2 #f2f2f2 #f2f2f2 #07f'
      	: '#f2f2f2 #f2f2f2 #f2f2f2 #a1a1a1'};
	}
`;

道具を伝えるoneTopが未定義の場合🙄
console.logでpropsを見るとonetopというpropertyは存在しません
バカなコードを書いたのを見たか...?
styled-componsesは、コンポーネントを使用して作成されないコンポーネントにpropsを渡します.
ソース:https://giphy.com
アイテムを伝えるときは必ず!componentを作成したら、転送する必要があります.😂
変更後:

<MatchesComponent className="matches">
   {matchData &&
        matchData[0].matches.map((value, index) => {
		// ...
          return (
            <RecordMatchComponent oneTop={+value.player.matchRank}>
             // ...
            </RecordMatchComponent>
          );
        })}
 </MatchesComponent>

const RecordMatchComponent = styled.section`
	section {
		border-color: ${props =>
    	props.oneTop === 99
      	? '#f2f2f2 #f2f2f2 #f2f2f2 #f62459'
      	: props.oneTop === 1
      	? '#f2f2f2 #f2f2f2 #f2f2f2 #07f'
      	: '#f2f2f2 #f2f2f2 #f2f2f2 #a1a1a1'};
	}
`;

(RecordMatchComponentは、その後、別個の要素として除去される.)
コンポーネント化して生活しましょう...!