??? ??? HTML? ???? ??? ?? ????. ?? ?? ??? ?? ???? (SPA)? ????? ? ?? ??? ?????. React? CSS? ?? ??? ???? ???? ??? ??? ?? ???.

?? ??? ?? ?? ??

? ??? ???? CSS ??? ?????.

1. CSS ?? (? : style.css )? ????.
2. CSS ??? ??????.
3. React ?? ??? ?????.

 import "./style.css";

?:

 "React"?? React React;
import "./components/css/app.css";

?? ? () {
  ?? (
    <div classname="main"></div>
  );
}

?? ? ????;

/Components/css ???? App.css ?????.

??? ???

?? ?? ??? ??? ?? ??? ????? ?? ????? ????? ??? ???? ?? ???? ??? ? ? ????. React? ?? ?? ??? ?? ?? ?? ??? ??????.

??? ? :

<div classname="main" style="{{" color:></div>

?? ??? ? ?? ??? ??? ??? ?????.

 "React"?? React React;

?? ? () {
  const ??? = {
    ??: {
      BackgroundColor : "#f1f1f1",
      ?? : "100%",
    },
    ?? ??? : {
      ?? : "10px",
      ?? : "???",
    },
  };
  ?? (
    <div classname="main" style="{styles.main}"></div>
  );
}

?? ? ????;

??? styles ??? ?? ? ???? ?????. ?? ????? ?? ???? ??? ??????.

CSS ??

CSS ??? ??? ??? ? ??? ??? ???? ? ? ?? ?????? ?? ??? ?????. ? ?? ??? ?? ? ??? ??? ????.

1. .module.css ??? ???? (? : styles.module.css ).
2. React ?? ??? ?????.
3. className ? ?? ??? ???? ??????.

 / * Styles.module.css */
.FONT {
  ?? : #F00;
  ?? ?? : 20px;
}

 "React"?? React React;
"./styles.module.css"?? ?? ?? ???;

?? ? () {
  ?? (
    <h1 classname="{styles.font}">????? ??</h1>
  );
}

?? ? ????;

???? ?? ??

Styled Components? JavaScript ?? ?? CSS? ???? ???? ? React ?? ??? ???? ??? ?????. ???? ?? ? ??? ??, ?? ??? ? ? ?? CSS ??? ?????.

?? : npm install styled-components

?? ?? : import styled from 'styled-components';

?:

 "React"?? React React;
"???? ?? ??"?? ?????? ??;

const ?? = Styled.div`
  ?? : 100%;
  ?? : 100px;
  ??? : ???;
  ????? : ??;
`;;

?? ? () {
  ??<wrapper></wrapper> ;
}

?? ? ????;

??? ???

Styled Components? ???? CSS ??? ??? ???? ??? ????? ????? ?? ?? ?? ?? ??? ???? ?? ??? ??? ?????. ? ??? ??? ???? ?? 3 ? ???? ?????.

(??? ????? ???? ?? ??? ???? ?????? ??? ?????.)

??

React? ??? CSS ??? ??? ?????. ??? ?? ??? ???? ??, ??? ? ?? ???? ?? ????. ? ??? RECT ????? ??? ??? ?????? ??? ??? ?????.

? ??? React?? CS? ???? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!