スタイルのコンポーネント+スタイルシステムスーパーパワーパートI

これは、私たちがどのように我々は再利用可能な、効率的なコンポーネントを作成するためにスタイルのコンポーネントとスタイルのシステムの力を活用することができますを示している記事のマルチパートシリーズです.我々は、フロントエンドのコンポーネント時代です.コンポーネントをレゴと関連付けることができます.legosに似て、我々はさらに驚くべきものをつくるために他のコンポーネントと結合されることができるより大きい構成要素を構築するために付けられることができる小さな再利用可能なコンポーネントを持つことができます.まずはスタイル付きコンポーネントから始めましょう.
スタイルコンポーネントパッケージをプロジェクトに追加します.
糸追加スタイルコンポーネント
スタイルのコンポーネントは、スタイルのコンポーネントにタグ付きテンプレートリテラルを利用しています.より良い理解を得るために簡単なテキストコンポーネントを作成しましょう.

import styled from 'styled-components';

const Text = styled.p`
  color: orange;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.5px;
`;

上の例では、既存のPタグをHTML DOMから拡張しています.そしてより多くのスタイルを与える.何を知っていないあなたのそれらのためにここでスタイルのコンポーネントを意味します.これはテンプレートリテラルと呼ばれます.スタイルコンポーネントでタグまたはコンポーネントを拡張するたびに、それは反応コンポーネントを返します.この反応成分は、通常の成分と全く同じである.ボタンコンポーネントを作成しようとします.

const Button = styled.button`
  background: orange;
  color: white;
  font-size: 15px;
  padding: 10px 30px;
  border: none;
  border-radius: 3px;
  font-weight: 500;
  margin: 20px;
`;

const App = () => props => <Button>Hello World</Button>

これは、スタイルコンポーネントを使用して再利用可能なコンポーネントを作成する方法を簡単に想像できます.しかし、1つの問題があるようです.反応のコンポーネントは、彼らの行動を彼らに小道具を渡すことによって制御することがカスタマイズ可能です.それは簡単にカスタマイズできない場合はどのように良いスタイルのコンポーネントです.次の段階では、このコンポーネントをどのように受け入れるかを学びます.
小道具を受け入れる
プロップを受け入れるコンポーネントを作る前に、コンポーネントを定義するキースタイルを理解することが重要です.ボタンの場合、これらのスタイルは、背景とテキストの色(可能性がある場合は、固体の状態は、高度な何かをしたい)ことができます.
スタイルのコンポーネントを使用すると、prop値のコンポーネントにアクセスできます.これにより、我々は柱に基づいてキーのスタイルを変更することができます.ボタンのコンポーネントを変更して、小道具に対応でき、ボタンの異なるバリアントを作成します.

const Button = styled.button`
  background: ${props => (props.bg ? props.bg : "orange")}
  color: white;
  font-size: 15px;
  padding: 10px 30px;
  border: none;
  border-radius: 3px;
  font-weight: 500;
  margin: 20px;
`;

const App = () => (
 <div>
   <Button bg="#FF595E">Danger Button</Button>
   <Button>Default Button</Button>
 </div>
);

ボタンコンポーネントの背景をハードコーディングしていないので、BGと呼ばれるプロップが存在するかどうかを調べます.それが存在するならば、我々はバックグラウンドとしてそれを使うつもりです.ここで、BG(background)propを受け入れるボタンコンポーネントがあります.同様に多くのコンポーネントを作成できます.バックグラウンドで書いた関数を最適化したい場合は、次のように書きます.background: ${props => props.bg};この構文の唯一の問題は、このコンポーネントを使用するたびにBG PROPを渡す必要があることです.つは、これはデフォルトの小道具を使用するように修正する最も簡単な方法です.Button.defaultProps = { bg: 'orange' };これは常にデフォルトのbg - propをコンポーネントに提供するので、このコンポーネントを使用するたびにbg - propを渡すことを心配する必要はありません.この例はかなり基本的です.しかし、実際の生活のプロジェクトでは、いくつかのコンポーネントは非常に複雑です.多くのキースタイル要素を変更できるコンポーネントの例を示します.

import React from "react";
import styled from "styled-components";

const CardWrapper = styled.div`
  background: ${props => props.bg};
  width: 350px;
  margin: auto;
  padding-bottom: 20px;
  border-radius: ${props => props.borderRadius}px;
`;

const Image = styled.img`
  width: 100%;
  height: auto;
  border-radius: ${props =>
    `${props.borderRadius}px ${props.borderRadius}px 0 0`};
`;

const Title = styled.h3`
  color: ${props => props.titleColor}
  margin: 0;
  padding: 15px;
`;

const Description = styled.p`
  color: ${props => props.textColor};
  padding: 0px 15px;
  margin: 0;
`;

const Card = ({
  image,
  title,
  description,
  titleColor,
  textColor,
  borderRadius,
  ...props
}) => (
  <CardWrapper borderRadius={borderRadius} {...props}>
    <Image src={image} borderRadius={borderRadius} alt={title} />
    <Title titleColor={titleColor}>{title}</Title>
    <Description textColor={textColor}>{description}</Description>
  </CardWrapper>
);

Card.defaultProps = {
  bg: "white",
  titleColor: "#1982c4",
  textColor: "#999",
  borderRadius: 5
};

const App = () => (
 <Card
  image="assets/react-image.png"
  title="Card Title"
  description="Lorem ipsum dolor sit amet, consectetur adipiscing"
 />
);

これは、複数のスタイルのコンポーネントを使用して、より大きな再利用可能なコンポーネントを作成する方法を示す例です.我々は、より多くのカスタマイズ可能にするには、このコンポーネントに追加機能の多くを追加することができます.次のパートでは、スタイルのコンポーネント内のすべてのミニ機能を記述し、再利用可能なコンポーネントをより良い、より速く効率的な方法で作成する方法を共有します.Part 2