Переключить класс тела с помощью styled-компонентов и React setState

Question

Я пытаюсь открыть меню вне холста и затем применить overflow-y: hidden; к остальной части документа, чтобы предотвратить прокрутку. Это удивительно сложно, учитывая, как React и styled-components работают с state.

Как мне получить доступ к body? Я действительно не хочу использовать document, чтобы получить / установить, потому что это сайт SSR Gatsby, и это приведет к ошибкам. Есть ли родной способ подняться так высоко с этим стеком?

import React from 'react'
import styled from 'styled-components'

import NavMenu from '../NavMenu/navmenu.js'

// Styles, w/ styled-component syntax
const HeaderBG = styled.header`
  background-color: ${props => props.theme.purple};
  padding: 5px 25px;
`
const HeaderContainer = styled.section`
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: ${props => props.theme.xl};
`

const NavMenuButton = styled.div`
  cursor: pointer;
`

const NavMenuLine = styled.div`
  background: #fff;
  height: 2px;
  margin: 5px 0;
  transition-duration: .15s;
  transition-property: transform, opacity;
  transition-timing-function: ease-in-out;
  width: 25px;
`


// Header component
class Header extends React.Component {

  // Initial menu state is closed (false)
  constructor(props) {
    super(props)
    this.state = {
      menuStatus: false
    }
  }

  // Toggles menu open/close state
  menuToggle = () => {
    this.setState( prevState => ({
      menuStatus: !prevState.menuStatus
    }))
  }

  render() {
    return (  
      <div>
        <HeaderBG>
          <HeaderContainer>
            <NavMenuButton onClick={ this.menuToggle } menuState={ this.state.menuStatus }>
              <NavMenuLine></NavMenuLine>
              <NavMenuLine></NavMenuLine>
              <NavMenuLine></NavMenuLine>
            </NavMenuButton>
          </HeaderContainer>
        </HeaderBG>
      </div>
    )
  }
} 

Answer 1

На самом деле вы можете использовать новый ' createGlobalStyle ', который я быстро собрал для вас.

import React from 'react';
import PropTypes from 'prop-types';
import {createGlobalStyle} from 'styled-components';

const GlobalStyles = createGlobalStyle`
    overflow-y: ${({menuOpen}) =>
      menuOpen && hidden };
  }


export default class GlobalCss extends React.Component {
  state = {
    menuOpen: false
  };

  componentDidMount() {
    document.body.addEventListener('onToggleMenu', this.onMenuOpen, true);
  }

  componentWillUnmount() {
     document.body.removeEventListener('onToggleMenu', this.onMenuOpen, true);    
  }

  onMenuOpen = event => {
      this.setState({
        menuOpen: !this.state.menuOpen
      });
    }
  };

  render() {
    return <Styled.GlobalStyles menuOpen={this.state.menuOpen} />;
  }
}

Вы добавляете компонент в компонент верхнего уровня как

  <GlobalStyles />

Answer 2

Если вы используете (или можете обновить до) версию 4, вы можете использовать новый createGlobalStyle помощник . Приятно, что вы можете создавать его везде в своем коде.