实现 css 日期选择器样式在表单内无法正常工作

Question

我正在为我的项目使用 materializecss 日期选择器。但问题是日期选择器样式在表单内无法正常工作，但时间选择器工作正常。日期选择器的大小正在拉伸。但是在表格之外的日期选择器工作正常。在这种情况下我该怎么办。 此处为屏幕截图 Outside the formInside the form 这是我的代码

我想要像表单外部一样的样式

 <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'
});