物化css数据报警器样式在窗体内不正确工作。

Question

在我的项目中，我使用的是物质化数据报警器。但问题是，数据采集器的样式在表单中不能正常工作，但是时间选择器工作正常。数据报警器的尺寸正在拉伸。但是在表单之外，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>

Answer 1

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

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