web-dev-qa-db-ja.com

GatsbyJSでのCSSリセットの実装

私はGatsbyJSを初めて使用し、解決策のためにドキュメントをまとめていますが、解決策が見つからないようです。そのため、より大きな部分が欠けていると思います。ブラウザのデフォルトのスタイルを削除する方法は、インデックスレイアウトにある種のcss-reset.cssファイルをインポートし、次の行に沿って独自のスタイルで上書きすることだと思いました。

import React from 'react';

import reset from './reset.module.css';
import styles from './index.module.css';

しかし、私はそれらをこのように上書きすることはできないようです（リセットのみが実装されています）。 GatsbyJSのビルドプロセスについて、ここで欠けている基本的なものはありますか？ gatsby-configファイルに統合する必要があるものはありますか？これを行うプラグイン/ CSSリセットを達成するためのより良い手段はありますか？助けてくれてありがとう。

gatsby
9
kqcef

CSSモジュールをインポートする代わりに、最初に説明したようにcss-reset.cssをインポートするだけです。

デフォルトのGatsbyスターターの例に従って、スタイルシートを/layoutsに配置し、次のように/layouts/index.jsにインポートできます。

import ./reset.css
import ./index.css

これにより、スタイルがグローバルに適用されます。

Gatsbyのもう1つのオプションは、 Typography.js を使用し、 overrideStyles 設定を介してグローバルリセットスタイルを適用することです。

4
ooloth

プラグインを使用する場合 typography.js 、normalize.cssがデフォルトで含まれています。技術的には純粋なリセットではないと思いますが、Typographyインスタンスに渡される構成オブジェクトを使用して基本スタイルをさらに変更できます。

オプションには、baseFontSize、baseLineHeight、scaleRatio、blockMarginBottom、bodyWeight、headerWeight、overrideStylesが含まれます。

たとえば、これはフォントサイズを62.5％に設定するために使用するものです。

const typography = new Typography({ baseFontSize: '10px' })

Typography.jsのインストールと設定の詳細については、 公式Gatsbyチュートリアルのパート2 を参照してください。

4
abo46n2

CSS Modules をインポートするときは、そのクラスをコンポーネントに適用する必要があります。

import styles from 'my-styles.module.css'

export default () => <div className={styles.mainDiv}>Hi</div>
2
Kyle Mathews

ギャツビーと組み合わせてマテリアルUIを使用している場合は、 CSSベースライン を使用する必要があります。 normalize.cssと同じです

import React from 'react';
import CssBaseline from '@material-ui/core/CssBaseline';

export default function MyApp() {
  return (
    <React.Fragment>
      <CssBaseline />
      {/* The rest of your application */}
    </React.Fragment>
  );
}
0
EliteRaceElephant

シンプルに保つ：gatsby-browser.jsで

import("./src/css/normalize.css");

次に、を介してコンポーネントのスタイルを設定します

import 'myComponentStyles' from '../css/myComponent.module.css'
0
Antoine RPSTSK