13

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

import React from 'react';

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

但我似乎无法以这种方式覆盖它们（仅实现了重置）。GatsbyJS 的构建过程中是否有一些我在这里遗漏的基本内容？我需要集成到gatsby-config文件中的东西？是否有一个插件可以做到这一点/更好的方式来实现 CSS 重置？谢谢您的帮助。

4

6 回答 6

6

作为导入 CSS 模块的替代方法，您可以简单地css-reset.css按照您最初描述的方式导入。

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

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

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

Gatsby 的另一个选择是使用Typography.js并通过overrideStyles设置应用您的全局重置样式。

于 2017-10-28T01:36:14.757 回答
5

您可以使用gatsby-browser.js. 如果您有一个用于一致主题的布局组件，您也可以将其导入那里。

这样做只包含样式表：

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

无需将导入分配给变量，因此不要这样做：

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

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

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;
};
于 2019-06-07T19:32:15.987 回答
4

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

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

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

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

您可以在官方 Gatsby 教程的第 2 部分中阅读有关安装和设置typography.js 的更多信息。

于 2018-03-25T23:39:20.890 回答
2

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

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

export default () => <div className={styles.mainDiv}>Hi</div>
于 2017-10-23T00:58:34.340 回答
0

保持简单：在 gatsby-browser.js

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

然后通过

import 'myComponentStyles' from '../css/myComponent.module.css'
于 2019-12-17T00:29:40.957 回答
0

如果您将 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>
  );
}
于 2020-01-03T01:13:28.757 回答