在GatsbyJS中实现CSS重置

我对GatsbyJS是新手，一直在梳理文档寻找解决方案，但似乎找不到，这让我觉得我缺少了一些更大的内容。我认为消除浏览器默认样式的方法是在我的索引布局中导入某种类型的

css reset.css

文件，并用我自己的样式覆盖它，大致如下：

import React from 'react';

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

但我似乎无法以这种方式覆盖它们（只实现了重置）。盖茨比的构建过程中有什么基本的东西我在这里遗漏了吗？我需要集成到

gatsby config

文件中的东西？有没有一个插件可以做到这一点/更好地实现CSS重置？谢谢您的帮助。

导入时，您需要将其类应用于组件，例如

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

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

从“my styles.module.css”导入样式
导出默认值（）=>Hi

作为导入CSS模块的替代方法，您可以简单地导入

CSS reset.CSS

，如前所述

按照默认Gatsby starter的示例，您可以将样式表放置在

/layouts

中，然后将其导入

/layouts/index.js

中，如下所示：

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

这将为您在全球范围内应用您的样式

Gatsby的另一个选项是通过设置使用和应用全局重置样式。

使用插件时，默认包括normalize.css。虽然从技术上讲，我想这不是一个纯粹的重置，但是您可以通过传递给排版实例的配置对象进一步修改基本样式

一些选项包括：baseFontSize、baseLineHeight、scaleRatio、blockMarginBottom、体重、头重、覆盖样式。

例如，这就是我用来将字体大小设置为62.5%的方法：

const排版=新排版（{baseFontSize:'10px'}）

---

您可以在中阅读有关安装和设置typography.js的更多信息。

您可以使用

gatsby browser.js

导入重置/规范化/其他全局css导入。如果您有一个用于一致主题的布局组件，您也可以将其导入其中

执行此操作仅包括样式表：

import '../styles/myGlobalStyle.css';

无需将导入指定给变量，因此不要执行以下操作：

import globalStyles from '../styles/myGlobalStyle.css';

例如，在

gatsby browser.js

（v2）中使用：

从“React”导入React；
从“./src/components/Context”导入{Provider}；
//下一行是导入全局样式所需的全部内容
导入“normalize.css/normalize.css”；
导出常量wraproteElement=（{element}）=>{
const ConnectedRootElement={element}；
返回连接的远程通讯；
};

保持简单：在gatsby-browser.js中

import（“./src/css/normalize.css”）；

然后通过

从“../css/myComponent.module.css”导入“myComponentStyles”

如果您将Material UI与Gatsby结合使用，则应使用。它的作用与

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>
  );
}

从“React”导入React；
从“@material ui/core/CssBaseline”导入CssBaseline；
导出默认函数MyApp（）{
返回(
{/*应用程序的其余部分*/}
);
}

这是否意味着没有办法像CSS重置那样完全应用样式表？@kqcef，为什么您首先将CSS重置作为模块导入？通过将CSS重置导入index.js，您始终可以将其添加到

head

，就像这样。

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>
  );
}