Reactからcssを適用

3849 ワード
テキストリンク
🔶jsxコードに直接適用
function App(){
return <h1 style={{ fontSize: "18px", color: "red"}}>title</h1>
}
🔶 CSS Module
  • 1.Button.module.css(cssファイルをモジュール化)
    :cssファイルをmoduleとして必要な複数の場所に書き込むことができます.
    • .divEl {
  background-color: skyblue;
}

.btnEl {
  background-color: red;
}
    .
  • 2.Button.js(必要なコンポーネントからcssをインポートして使用)
    :create-act-appはcssコードをjavascriptのobjに変換します.
    : styles = {divEl: { background-color: skyblue} , btnEl:{ background-color: red} }
    →反応コードのstylesです.btnelはこう書くことができます
    • import styles from "./Button.module.css";

function ButtonApp() {
  return (
    <>
      <div className={styles.divEl}> hello</div>
      <button type="buttun" className={styles.btnEl}>
        click
      </button>
    </>
  );
}

export default ButtonApp;
    🔶styled componentの使用
  • スタイルを作成すると、そのスタイルを適用する構成部品が作成されます.
    • 整列
    Vue.jsラーニングItem 1-クイックスタート