在 GatsbyJS 中实现 CSS 重置

Question

我是 GatsbyJS 的新手，一直在梳理文档以寻找解决方案，但似乎找不到解决方案，这让我觉得我遗漏了一些更大的部分。我假设消除浏览器默认样式的方法是在我的索引布局中导入某种 css-reset.css 文件并用我自己的样式覆盖它，如下所示：

import React from 'react';

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

但我似乎无法以这种方式覆盖它们（仅实现了重置）。我在这里缺少有关 GatsbyJS 构建过程的一些基本知识吗？我需要将某些内容集成到 gatsby-config 文件中吗？是否有插件可以 this/a 更好地实现 CSS 重置？感谢您的帮助。

Answer 1

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

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

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

Answer 2

作为导入 CSS 模块的替代方法，您可以简单地导入 css-reset.css 正如您第一次描述的那样。

按照默认 Gatsby 启动器的示例，您可以将样式表放在 /layouts 中，然后将它们导入 /layouts/index.js，如下所示：

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

这将为您全局应用您的样式。

Gatsby 的另一个选项是使用 Typography.js and apply your global reset styles via the overrideStyles 设置。

Answer 3

使用插件typography.js时，默认包含normalize.css。虽然我猜技术上不是纯粹的重置，但您可以通过传递给 Typography 实例的配置对象进一步修改基本样式。

一些选项包括：baseFontSize、baseLineHeight、scaleRatio、blockMarginBottom、bodyWeight、headerWeight、overrideStyles。

例如，这是我用来将 font-size 设置为 62.5% 的方法：

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

您可以在 part 2 of the official Gatsby tutorial 中阅读有关安装和设置 typography.js 的更多信息。

Answer 4

您可以使用 gatsby-browser.js 导入 reset/normalize/other 全局 css 导入。如果你有一致主题的布局组件，你也可以在那里导入它。

这样做只是为了包含样式表：

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

不需要将导入分配给变量，所以不要这样做：

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

例如，在 gatsby-browser.js (v2) 中使用 normalize.css：

import React from 'react';
import { Provider } from './src/components/Context';

// This next line is all you need to import global styles
import 'normalize.css/normalize.css';

export const wrapRootElement = ({ element }) => {
  const ConnectedRootElement = <Provider>{element}</Provider>;
  return ConnectedRootElement;
};

Answer 5

保持简单：在 gatsby-browser.js

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

然后通过

设置组件样式

import 'myComponentStyles' from '../css/myComponent.module.css'

Answer 6

如果您将 Material UI 与 Gatsby 结合使用，您应该使用 CSS Baseline。它与 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>
  );
}

在 GatsbyJS 中实现 CSS 重置

Implementing a CSS Reset in GatsbyJS

gatsby