关于reactjs：在gatsby js中使用react-md


Use react-md in gatsby js

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

这是我安装react-md所做的：

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

1
2
3
plugins: [
    'gatsby-plugin-sass'
]

然后，在layouts>index.scss下，

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

然后将其导入到layouts>index.js中

1
import './index.scss'

渲染Button组件时，它没有任何样式。 我检查了该组件，并对其应用了所有正确的CSS className，但是规则似乎不起作用。

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

1
2
3
4
5
@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

例如 在要导入的react组件的scss文件中使用@include react-md-buttons并在react-md中使用