Question

我试图在我的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 classNames，但规则似乎没有用。

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

e.g。将@include react-md-buttons用于您要导入的反应组件的scss文件，并使用react-md中的<Button/>

文档：Minimizing Bundle - react-md docs

在gatsby js中使用react-md

1 个答案: