Содержимое становится белым при открытии материализации Модал - PullRequest
Новая
       37

Содержимое становится белым при открытии материализации Модал

2 голосов
/ 07 октября 2019

Я пытался сделать модальный вход в React с использованием библиотеки Materialize и столкнулся с этой странной проблемой. Поля ввода не отображаются правильно, и флажок даже не появляется. Также титульная карточка кажется белой. Я пытался следовать этой кодовой ручке: https://codepen.io/skcals/pen/bxdpaN.

Вот компонент, в котором я открываю и отображаю модал: 

import React, { Component } from "react";
import M from "materialize-css";
import { NavItem } from "react-materialize";
import ReactDOM from "react-dom";


import "./style.css";

export default class LoginModal extends Component {

  componentDidMount() {

    const modal = ReactDOM.findDOMNode(this);

    let elems = modal.querySelector('.modal');
    M.Modal.init(elems, {
      'dismissible' : true
    });
  }

  render() {
    return (
      <NavItem>
        <div className="container center">
          <a href="#login" className="modal-trigger">Login</a>
        </div>

        <div id="login" className="modal ">
          <h5 className="modal-close">&#10005;</h5>
          <div className="modal-content center">
            <h4>Login Form</h4>
            <br/>

            <form action="#">

              <div className="input-field">
                <i className="material-icons prefix">person</i>
                <input type="text" id="name"/>
                <label for="name">Username</label>
              </div>
              <br/>

              <div className="input-field">
                <i className="material-icons prefix">lock</i>
                <input type="password" id="pass"/>
                <label for="pass">Password</label>
              </div>
              <br/>

              <div className="left remember-me">
                <input type="checkbox" id="check"/>
                <label for="check">Remember Me</label>
              </div>
              <br/>

              <input type="submit" value="Login" classNameName="btn btn-large"/>

            </form>
          </div>
        </div>
      </NavItem>
    );
  }
}

Вот файл style.css 

a.btn{
  margin-top: 30%;
}
.modal{
 max-height:100%;
 overflow:hidden;
}

input[type="submit"]{
  width: 100%;
  margin-top: 50px;
}
.modal-close{
  position: absolute;
  top:10px;
  right:10px;
  padding:0;
  margin:0;
}

.remember-me {
  margin-left: 2vh;
}

Вот модал после его открытия:

Как видите, все белое / белое и выглядит неправильно. Если у кого-то есть идея, почему это происходит, мне бы очень хотелось знать.

Заранее благодарим за любую помощь.

...