反応とスタイルのコンポーネントから始める

こんにちは!
フレンドになりたい人Frontend Mentor あなたがCSSプロジェクトに取り組むことができますあなたのCSS技術をあなたが複製しようとするあらかじめ設計された挑戦を使用して押し上げます.私は、私がCSSとこの愛/憎悪関係を持つという考えを愛していました.
私は私がそれに行くだろうと思いました、しかし、私は私が私のCSSを押し上げる間、若干の新しい技術を学ぶために反応してスタイルの構成要素を実行しようとすると思いました.
私は私のインターンシップでスタイルのコンポーネントを少し使用したが、私はそれを実装する反応プロジェクトを開始したことがない.私は個人的にスタイルのコンポーネントの背後にある思考プロセスのように、それは非常にCSSのコンポーネントは、しばしば再利用することが大規模なプロジェクトで非常に有用であると思う.
それで、あなたが興味を持っているならば、反応でスタイルにされた構成要素を使用し始める方法についての少しのチュートリアルです.そして、あなたもMoreeee興味がある場合は、これまで私の課題と進捗状況を見ることができますhere .

一歩一歩

あなたの反応アプリを作成
あなたは良い' olを使用することができますcreate-react-app

npx create-react-app my-new-app

しかし、あなたの反応アプリを作成したいと思います.あなたがタグや何かを楽しむを使用して自由に感じることができる、私は私はあなたと同様にそれを良くしようとしているとして私のタイプに追加することが起こった.

スタイルコンポーネントのインストール
私は糸の大きいOLです、しかし、あなたが楽しむものは何でも使ってください!

yarn add styled-components

or

npm i styled-components

コンポーネントの作成
そのインストールのすべての後、我々は楽しい部品に、コンポーネントを作るにジャンプすることができます!
したがって、スタイルの構成されたコンポーネントが機能する方法は、さまざまな構造であることができる名前付きコンポーネントを作成することです.
それらはあなたの代表的な機能またはクラス構成要素の範囲内で収容されて、呼ばれて、表示されるそれらのコンポーネント名を使用するでしょう.
以下は、私のカードクラスの一つです.

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

const Background = styled.div`
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  width: 100%;
  border: 1px solid grey;
  margin: auto;
  padding: 50px 20px;
  border-radius: 20px;
  border: 1px solid #f2f2f2;
  box-shadow: 1px 1px 1px 1px #f2f2f2;
`;

class CardOne extends React.Component {
    render() {
        return (
        <Background>
            <LeftImage>
            <RightText>
        </Background>
        )
    }
}

export default CardOne;

上のクラスのcardoneのレンダリングとリターンの中で、背景コンポーネントを表示していることがわかります.
そして上記のスタイルを背景として宣言しました.私たちのスタイルのコンポーネントにアクセスしている基本的にはdivです.我々は、ボタンをクリックしてスタイルを使用することができます.
そして、その宣言されたバックグラウンド変数の中で、我々は我々のコンポーネントの中で我々のCSSのすべてを含みます.
それで、あなたのdivの中にあるものの各々の部分を壊すのは良い方法です、そして、あなたはすべてを個々に、または、彼らの親を通して彼らをスタイルにすることができます.

空想を得る
あなたも、スタイルのコンポーネントで超空想を取得し、CSSの内部ロジックを書くことができます.たとえば以下のようなものがあります.

const StyledTextField = styled.input`
  color: ${(props) =>
    props.isEmpty ? "none" : props.active ? "purple" : "blue"};
`;

このチュートリアルでは、スタイルの付いたコンポーネントから始めることができます.ハッピーコーディングY ' all!

資源

styled-components documentation

破滅的な雑誌のpost スタイルコンポーネントの使用について