在 gatsby js 中使用 react-md

Question

我正在尝试在我的 Gatsby JS 项目中使用 React Material 设计 (react-md)，我发现 CSS 规则没有被应用。因此，当我导入 Button 之类的组件并渲染该组件时，它没有任何样式。

这是我安装的 react-md:

在我的 gatsby-config.js 中添加了以下内容

plugins: [
    'gatsby-plugin-sass'
]

然后，在layouts>index.scss下我有

@import '~react-md/src/scss/react-md';

然后我将其导入我的 layouts>index.js as

import './index.scss'

当我渲染一个 Button 组件时，它没有任何样式。我检查了该组件，它应用了所有正确的 CSS 类名，但规则似乎不起作用。

Answer 1

添加到布局文件夹中的 index.scss

@import url('https://fonts.googleapis.com/cssfamily=Roboto:400,500,700|Material+Icons'); //optional
@import '~react-md/src/scss/react-md'; // Required
$md-primary-color: $md-teal-500; //optional colors
$md-secondary-color: $md-purple-a-400; //optional colors
@include react-md-everything; // Required

注意：使用 @include react-md-everything; 你会得到整个 react-md css 库。

如果你想最小化 CSS 更喜欢根据以下格式为每个相应的 react-md-component 使用 @import：

@include react-md-components

例如将 @include react-md-buttons 用于要导入的反应组件的 scss 文件，并使用来自 react-md

的 <Button/>

文档：Minimizing Bundle - react-md docs

在 gatsby js 中使用 react-md

Use react-md in gatsby js

sass

reactjs

material-design

gatsby