在 gatsby js 中使用 react-md答案

【问题标题】：Use react-md in gatsby js在 gatsby js 中使用 react-md
【发布时间】：2018-09-28 02:46:15
【问题描述】：

我正在尝试在我的 Gatsby JS 项目中使用 React Material Design (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 中

import './index.scss'

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

【问题讨论】：

标签： reactjs sass material-design gatsby

【解决方案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 到你要导入的 react 组件的 scss 文件，并使用 react-md 中的 <Button/>

文档：Minimizing Bundle - react-md docs

【讨论】：

有效！非常感谢