Есть ли способ использовать materializecss с Gatsby JS?

Question

Когда я использую CSS для материализации, вы должны использовать некоторые из их функций javascript, чтобы заставить CSS работать правильно

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

Этот компонент использует окно в gatsby js.Гэтсби Джей не позволит этого.кто-нибудь нашел способ обойти это?

Answer 1

Вы можете инициализировать компонент 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, {})
}

Я думаю, вы также можете использовать динамический импорт.

Я до сих пор не понял, как создать волны материализации.JS эффекты работают, хотя.

Answer 2

Gatsby основан на React и обычно не рекомендуется манипулировать главным домом при кодировании в React.Вместо этого вы должны попытаться использовать ссылки или искать реагирующий вариант библиотеки, которую вы хотите использовать, которая была адаптирована.