javascript - 打开具体化模态时内容变成白色

Question

我一直在尝试使用 Materialize 库在 React 中创建登录模式，并且遇到了这个奇怪的问题。输入字段显示不正确，复选框甚至没有出现。此外，标题卡似乎是白色的。我一直在尝试关注这个 codepen：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;
}

这是打开后的模态：

如您所见，一切都是白色/白色的，并且显示不正确。如果有人知道为什么会这样，我真的很想知道。

提前感谢您的帮助。

标签： javascriptcssreactjsmodal-dialogmaterialize