Question

我目前正在尝试在Gatsby JS驱动的网站中实现一个相当简单的功能，该网站是由其他人构建的，并且面临以下问题：

打开模态时，页面当前使背景变暗，但是我想使背景模糊。为了获得更暗的背景，模态组件包括一个固定位置的div，它填充了窗口，其css如下：

.background_fader {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.2);
  cursor: pointer;
}

我尝试使用filter: blur(20px)代替background-color，但无济于事。看起来，即使更改了div的z-index，我也无法使背景模糊，而是宁愿在页面的包装器上添加filter属性，即更高在层次结构中。

我有一定的反应经验，而对盖茨比则几乎没有经验，所以请问这个问题是否简单/根源于基本的误解。到目前为止，我所处理的是使用Redux作为集中状态的页面，而在实现模糊处理时出现的更广泛的问题是：

如何为Gatsby页面的根组件添加状态，以便将相关方面传递给子组件，从而重新呈现页面？

经过研究，我得出结论，应该可以使用gatsby-browser.js中的wrapRootElement函数来在应用程序的根目录定义状态，但是我是很难实现这一点，因为我似乎只能在通过layouts / index.js生成的“根”组件中访问的道具是从Graphql检索的数据。

当前layouts / index.js如下所示：

import React from 'react';
import graphql from 'graphql';
import Helmet from 'react-helmet';
import classNames from 'classnames';

// import 'bootstrap/dist/css/bootstrap.min.css';
import './reset.css';
import '../components/styleguide/index.less';
import Feedback from '../components/feedback';
import Navbar from '../components/Nav';
import Footer from '../components/footer';
import Subscribe from '../components/Subscribe';
import './index.less';

export default ({
  children, location, data: {
    FooterSettings: { edges: [{ node: { frontmatter: footerData } }] },
    NavbarSettings: { edges: [{ node: { frontmatter: navbarSettings } }] },
    HomepageSettings: { edges: [{ node: { frontmatter: homepageSettings } }] }
  }
}) => {
  const wrapperClasses = classNames(
    'page-wrapper',
    {
      'page-wrapper--custom': location.pathname.split('/')[1]
    },
    `page-wrapper--${location.pathname.split('/')[1]}`
  );
  return (
    <div className={wrapperClasses}>
      <Helmet>
        <html lang="uk" />
      </Helmet>
      <Navbar location={location.pathname} className={location.pathname.split('/')[1]} {...navbarSettings} />
      <Feedback
        location={location}
        email={homepageSettings.contactFormEmail}
        title={homepageSettings.contactFormTitle}
      />
      {children()}
      <Subscribe email={homepageSettings.contactFormEmail} className={location.pathname.split('/')[1]} />
      <Footer {...footerData} {...navbarSettings} className={location.pathname.split('/')[1]} />
    </div>
  );
};

export const pageQuery = // very long query which appears to be sound

所以，回到我的问题：

如何根据传递给wrapperClasses组件的状态动态地向<Feedback添加或删除类名，以及在哪里实例化此状态以重新存储整个状态页，当它更改时。

先谢谢大家。

维护/访问盖茨比站点中的全局状态

0 个答案: