从 mdbReact 的页面获取不同的布局

如何解决从 mdbReact 的页面获取不同的布局

我正在尝试在 mdbreact 中使用登录框架的基本代码，但我得到了与预期不同的布局。我正在复制完全相同的代码。 我的布局看起来像这样 My login page 但我期待的是这种设计expected frame。 我在 App.js 文件 import Login from './views/Login.js';

中导入这个 Login.js 文件

我在 Login.js 中的代码看起来像那样（从 mdbreact 的主页复制）：

import React from "react"; 
import { MDBContainer,MDbrow,MDBCol,MDBBtn,MDBCard,MDBInput }
from 'mdbreact';
import './Login.css'



const FormPage = () => {
return (
        <MDBContainer>
    <MDbrow>
        <MDBCol md='6'>
            <MDBCard
                className='card-image'
                style={{
        backgroundImage:
                'url(https://mdbootstrap.com/img/Photos/Others/pricing-table7.jpg)',width: '28rem'
        }}
                >
                <div className='text-white rgba-stylish-strong py-5 px-5 z-depth-4'>
                    <div className='text-center'>
                        <h3 className='white-text mb-5 mt-4 font-weight-bold'>
                            <strong>SIGN</strong>
                            <a href='#!' className='green-text font-weight-bold'>
                                <strong> UP</strong>
                            </a>
                        </h3>
                    </div>
                    <MDBInput
                        label='Your email'
                        group
                        type='text'
                        validate
                        labelClass='white-text'
                        />
                    <MDBInput
                        label='Your password'
                        group
                        type='password'
                        validate
                        labelClass='white-text'
                        />
                    <div className='md-form pb-3'>
                        <MDBInput
                            label={
        <>
                            Accept the&nbsp;
                            <a href='#!' className='green-text font-weight-bold'>
                                Terms and Conditions
                            </a>
                            </>
                            }
                            type='checkBox'
                            id='checkBox1'
                            labelClass='white-text'
                            />
        </div>
        <MDbrow className='d-flex align-items-center mb-4'>
                        <div className='text-center mb-3 col-md-12'>
                            <MDBBtn
                                color='success'
                                rounded
                                type='button'
                                className='btn-block z-depth-1'
                                >
                                Sign in
                            </MDBBtn>
                        </div>
                    </MDbrow>
        <MDBCol md='12'>
                        <p className='font-small white-text d-flex justify-content-end'>
                            Have an account?
                            <a href='#!' className='green-text ml-1 font-weight-bold'>
                                Log in
                            </a>
                        </p>
                    </MDBCol>
        </div>
        </MDBCard>
        </MDBCol>
        </MDbrow>
        </MDBContainer>
        );
};

export default FormPage;

Login.css 文件如下所示：

 `.form-dark .font-small {
  font-size: 0.8rem; }

.form-dark [type="radio"] + label,.form-dark [type="checkBox"] + label {
  font-size: 0.8rem; }

.form-dark [type="checkBox"] + label:before {
  top: 2px;
  width: 15px;
  height: 15px; }

.form-dark .md-form label {
  color: #fff; }

.form-dark input[type=text]:focus:not([readonly]) {
  border-bottom: 1px solid #00C851;
  -webkit-Box-shadow: 0 1px 0 0 #00C851;
  Box-shadow: 0 1px 0 0 #00C851; }

.form-dark input[type=text]:focus:not([readonly]) + label {
  color: #fff; }

.form-dark input[type=password]:focus:not([readonly]) {
  border-bottom: 1px solid #00C851;
  -webkit-Box-shadow: 0 1px 0 0 #00C851;
  Box-shadow: 0 1px 0 0 #00C851; }

.form-dark input[type=password]:focus:not([readonly]) + label {
  color: #fff; }

.form-dark input[type="checkBox"] + label:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 17px;
  height: 17px;
  z-index: 0;
  border: 1.5px solid #fff;
  border-radius: 1px;
  margin-top: 2px;
  -webkit-transition: 0.2s;
  transition: 0.2s; }

.form-dark input[type="checkBox"]:checked + label:before {
  top: -4px;
  left: -3px;
  width: 12px;
  height: 22px;
  border-style: solid;
  border-width: 2px;
  border-color: transparent #00c851 #00c851 transparent;
  -webkit-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  transform: rotate(40deg);
  -webkit-backface-visibility: hidden;
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%; }

有什么帮助吗？