有没有办法在Gatsby js中使用materializecss？

Question

当我使用实体化CSS时，您必须使用其某些javascript函数才能使CSS正常工作

  componentDidMount() {
    //sidenav
    const sideNav = document.querySelector('.sidenav')
    const instance = M.Sidenav.init(sideNav, {})
  }

这些组件使用gatsby js中的窗口。 Gatsby js不允许这样做。有没有人找到解决方法？

Answer 1

Gatsby基于React，通常建议在React中编码时不要操纵主域。相反，您应该尝试使用references或在要使用的库中查找经过改编的react variant。

Answer 2

您可以使用以下方法初始化materialize-css组件：

if (typeof window !== 'undefined') {
  require('materialize-css/dist/js/materialize.min.js')
}

class Navigation extends Component {
  componentDidMount() {
    const elem = document.querySelector('.sidenav')
    window.M.Sidenav.init(elem, {})
}

我认为您也可以使用动态导入。

尽管如此，我仍然不了解如何实现wave.js效果。