styled-components

styled-conentsはCSSをJavaScriptから分離しません.
ダイレクトエレメントとして使用できるスタイリングフレーム.
レスポンス内のコンポーネントに異なるCSSスタイルを指定します.
これにより、スタイルの再利用性が向上します.

使用方法

既存CSSの適用

const style = {
	width: "100px";
    height: "50px";
}
return <div style={style}></div>

return <div style={{ width: "100px", height: "50px" }} ></div>

styled-コンポーネントの適用

import styled from "styled-components";

const StyledDiv = styled.div`
	width: 100px;
    	height: 50px;
`

return <StyledDiv></StyledDiv>

styledキーワードを使用して、既存のHTMLタグ、返信コンポーネントにstyleを指定します.

<div class="sc-bYwzuL fDDjHD"></div>

.fDDjHD {
    width: 100px;
    height: 50px;
}

styled-コンポーネントを構築すると、styleがクラス名に適用されるのがわかります.
そのため、重複しないclassNameはCSS造形中の混乱を減らすことができる.👍

特長

1.条件付き&可変造形

const StyledDiv = styled.div`
	width: 100px;
    	height: 50px;
    color: ${(props)=>
    	props.color === "white" ? white : black
    }
`

return <StyledDiv></StyledDiv>

styled-conentsは最も役に立つ機能です.
JavaScriptに直接接続できます.
Reactのpropsなどにより,ユーザは必要に応じて条件や可変の造形を行うことができる.

2.拡張造形

const StyledDiv = styled.div`
	width: 100px;
    	height: 50px;
`

const WhiteDiv = styled(StyledDiv)`
	background-color: white;
`

const BlackDiv = styled(StyledDiv)`
	background-color: black;
`

既存のコンポーネントまたは他のフレームのスタイルコンポーネント(マテリアルui、react-router-dom)の
CSSをcomponentに追加することもできます.
この機能を使用すると、同様のスタイルを一括管理できます.

3.オーバーラップスキャン

const StyledDiv = styled.div`
	width: 100px;
    	height: 50px;
    p {
    	text-size: 15px;
    	color: black;
    }
`
return (<StyledDiv><p>제목</p></StyledDiv>)

styled-コンポーネントからなるタグ
サブエレメントに適用するスタイルを指定します.
このスタイルに移動し、サブ構成部品のスタイルを指定します.

4.テーマ機能

// theme.js
export const lightTheme = {
  background: "#fff",
};

export const darkTheme = {
  background: "#111"
};

// App.js
import { ThemeProvider } from "styled-components";
import { lightTheme, darkTheme } from "./theme.js";

<ThemeProvider theme={userMode ? darkTheme : lightTheme}>
 ...
</ThemeProvider>

ThemeProvider機能を使用すると、現在のWebのスタイルトピックを指定できます.
Reactの場合、ThemeProviderのサブコンポーネントはprops受信トピックとして使用されます.
props.トピックでは、必要なWebトピックを指定できます.
これらの機能により、状態に応じて夜間モードなどを実施できます.