汎用スタイルを適用するグローバルCSS

1536 ワード
React CSS テキストリンク
すべての構成部品に共通のスタイルを指定します._app.tsxのglobals.cssではなく、新しいグローバルCSSを作成します.

1. _app.tsxにインポート

import { Global } from "@emotion/react"

2. globalStyles.tsの作成


import { css } from "@emotion/react";
export const globalStyles = css`
  * {
    margin: 0;
    box-sizing: border-box;
    font-size: 30px;
    font-family: "myFont";
  }
`;

3. _app.2 tsxに接続


既存importのstyles/globals/cssはコメント処理です!

他のスタイルを適用したいなら?


グローバルCSSはデフォルトです.
異なるスタイルを適用したい場合は、元のスタイルに従ってスタイルを指定できます.
💡 why?
css(カスケードスタイルシート):最上位にスタイルを適用すると、サブスタイルが上書きされます.
サブアイテムにスタイルを指定すると、そのスタイルはサブアイテムで優先されます.
座標データ収集
フォントの作成