Reactjs materialize css日期选择器样式在表单中无法正常工作

我正在为我的项目使用MaterializeCSDatePicker。但问题是datepicker样式在表单中不能正常工作，但timepicker工作正常。日期选择器的大小正在拉伸。但是表单之外的datepicker工作正常。在这种情况下我该怎么办。 此处的屏幕截图 这是我的代码

我想要的样式像外部的形式

 <form action="" className="col s12 m6 l6" onSubmit={this.handleSubmit}>
                    <h5 className="pink-text">Register New Renter</h5>
                    <div className="row">
                        <div className="input-field col s12 m6">
                            <label htmlFor="firstName">First Name</label>
                            <input type="text" id="firstName" onChange={this.handleChange} />
                        </div>
                        <div className="input-field col s12 m6">
                            <label htmlFor="lastName">Last Name</label>
                            <input type="text" id="lastName" onChange={this.handleChange} />
                        </div>
                        <div className="input-field col s12 m6">
                            <label htmlFor="address">Address</label>
                            <input type="text" id="address" onChange={this.handleChange} />
                        </div>
                        <div className="input-field col s12 m6">
                            <select defaultValue="Choose your option" id="assignedFlatNo" onChange ={this.handleChange}>
                            <option value={null}>Select Flat</option>
                                {this.props.houses[id].flatNames.map((name) => {
                                    return <option key={name} value={name}>Flat: {name}</option>
                                })
                                }
                            </select>
                            <label>Select Flat</label>
                        </div>
                        <div className="input-field col s12 m6">
                            <label htmlFor="phoneNo">Phone Number</label>
                            <input type="text" id="phoneNo" onChange={this.handleChange} />
                        </div>
                        <div className="input-field col s12 m6">
                            <label htmlFor="advanceAmount">Advance Amount</label>
                            <input type="text" id="advanceAmount" onChange={this.handleChange} />
                        </div>
                        <div className="input-field col s12 m6">
                            <label htmlFor="rentPerMonth">Rent Per Month</label>
                            <input type="text" id="rentPerMonth" onChange={this.handleChange} />
                        </div>
                        <div className="input-field col s12 m6">
                            <label htmlFor="rentDate">Date of Rent</label>
                            <input type="text" id="rentDate" className="datepicker" />
                        </div>

                    </div>

                    <div className="input-field col s12 m6">
                        <button className="btn pink lignten-1 z-depth-0">Create</button>
                    </div>
                </form>

登记新租户
名字
姓
地址
选择平面
{this.props.houses[id].flatNames.map（（name）=>{
返回平面：{name}
})
}
选择平面
电话号码
预付款
月租
租期
创造

我认为您需要将容器选项设置为“body”。至少，这解决了我的问题

M.Datepicker.init(input, {
    container: 'body'
});