グローバルスタイルファイル、cssモジュールを使用する:ファイル名.module.cssのようにreactにスタイルを適用できます.しかし、このような方式の代わりに、スタイルをより便利に使用することができる.😎

Styled Components

今日紹介するスタイル化コンポーネントは、JavaScriptでcssを使用するのに役立つスタイル化フレームワークです.これは、再利用性を向上させ、jsの影響を受ける造形を簡素化するのに役立つ.

使用方法

スタイルコンポーネントからインポートしたスタイルを使用します.

styled.入力します.

back-tickを使用して、back 0 tick間にcssを挿入します.

import styled from "styled-components";

//모든 style은 컴포넌트를 사용하기에 미리 컴포넌트에 포함된다
const Father = styled.div`
  display: flex;
`; //back-tick을 이용하여 style요소를 정해줄 수 있다. bacj-tick 내부에 css 코드를 써내려 갈 수 있다.

const BoxOne = styled.div`
  background-color : teal;
  width : 100px;
  height: 100px;
`;

const BoxTwo = styled.div`
  background-color : tomato;
  width : 100px;
  height: 100px;
`;

function App() {
  return (
  <Father>
    <BoxOne />
    <BoxTwo />
  </Father>
  );
}

export default App;

既存の個別のcssファイルをインポートするのとは異なり、styled-componyはstyleを使用する前にcomponentに予め含まれているため、コードの使用量が減少し、keyvalueの形式ではなくcss構文を使用するとより読みやすい.
構成部品を2つの部分に分けることができます.まずstyle、次に実装部分です.

これによりcomponentが構築されると、任意のクラス名が作成されていることがわかります.重複しないクラス名を作成すると、cssスタイルの混乱を回避できます.
前に重複するコードがたくさん見えます.componentを拡張して、重複する内容を変更できます.

const Box = styled.div`
  background-color : ${(props)=>props.bgColor}; 
  width : 100px;
  height: 100px;
`; //porps라는 파라미터를 받는 함수를 사용한다.

const Circle = styled(Box)`
  border-radius : 50px;
`; // Box와 border-radius값만 달라서 box component를 확장한다. 확장하려고자 하는 component이름을 styled()안에 적어준다.

const Text = styled.h1`
  color : black;
`;

function App() {
  return (
  <Father>
    <Box bgColor="teal" />
      <Text>Hello</Text>
    <Circle bgColor="tomato" /> {/* prop을 보내서 원하는 속성을 고르게끔 한다 -> component에 data를 보냄 */}
  </Father>
  );
}

これらのコードを通じて、私たちは2つのことを見ることができます.

propsでコンポーネントを設定できます.propの名前を渡し、関数でpropの名前を受け入れます.

拡張可能な

コンポーネント->既存の構成部品のすべてのプロパティをインポートし、すべてのプロパティを使用して新しいプロパティを追加できます.

componentのラベルは置き換えられますが、スタイルは置き換えられます。

const Father = styled.div`
  display: flex;
`; //back-tick을 이용하여 style요소를 정해줄 수 있다. back-tick 내부에 css 코드를 써내려 갈 수 있다.

const Btn = styled.button`
  color: white;
  background-color: red;
  border: 0;
  border-radius: 15px;
 `;

//component의 태그를 바꾸고 싶은데 스타일은 바꾸고 싶지 않을때, button이 아니라 a href 같은게 필요하다면?

function App() {
  return (
  <Father>
    <Btn>Log in</Btn>
  </Father>
  );
}

予想通りhtmlを使用するbuttonラベルが表示されます.
この問題はprop中のasによって解決できる.
このpropはbutton styled component Btnを使用し、HTMLセクションを置き換えてaを渡します.

<Btn as="a">Log in</Btn>

次のコンポーネントを使用できます.buttonとaラベルです.

異なるコンポーネントにプロパティを追加する場合は、

function App() {
  return (
  <Father>
    <Input />
    <Input />
    <Input />
    <Input />
    <Input />
  </Father>
  );
} 

5つのinputにrequiredプロパティを追加する場合は、5つのinputをすべて変更するのは面倒です.このすべてを修正する必要がありますか?
代わりにstyledcomponentsを使用することができます.
styled.input.attrs({})を使用します.
attributeには、ポストinputとして渡されるすべての属性のオブジェクトを含めることができます.

const Input = styled.input.attrs({ required: true, minLength:10 })`
  background-color: tomato;
 `;

attrsでは、すべての入力コンポーネントに必須属性を追加できます.