如何修复我的react项目中的ant design datepicker组件，.I共享了一个屏幕截图

Question

我正在做一个项目，它需要蚂蚁设计数据报警器以及引导，我不知道是什么让这个数据报警器移出屏幕。我需要用引导类来解决这个问题吗？我在这里分享了我的screenshot.thanenter图像描述[1]1

const form= () => (
        <form onSubmit={onFormSubmit}>
            <div className="form-group">
                <label className="btn btn-outline-secondary btn-block m-3">Add image
                    <input type="file" name="image" onChange={handleImageChange} accept="image/*" hidden/>
                </label>

                <input className="form-control m-2" type="text" name="title" placeholder="title" onChange={handleChange} value={title}/>
                <textarea className="form-control m-2" type="text" name="content" placeholder="content" onChange={handleChange} value={content}/>
                <AlgoliaPlaces className="form-control ml-2" placeholder="location" defaultValue={location} options={config} onChange={handleSearch} style={{height:"50px"}} />
                <input className="form-control m-2" type="number" name="price" placeholder="price" onChange={handleChange} value={price}/>
                <input className="form-control m-2" type="number" name="bed" placeholder="Number of beds" onChange={handleChange} value={bed}/>
            </div>  
            **<DatePicker className="form-control m-2"/>** 
            <button className="btn btn-outline-primary m-2">Add</button>
        </form>
    )
    return(
        <div>
            <div className="container-fluid p-5 text-center">
                <h2>Add </h2>
            </div>
            <div className="container-fluid">
                <div className="row">
                    <div className="col-md-10">
                        {hotelForm()}
                    </div
                    <div className="col-md-2">
                        <img src={preview} alt="preview-image" className="img img-fluid m-2" />
                        <pre>{JSON.stringify(values,null, 2)}</pre>
                    </div>
                </div>
            </div>
        </div>
    )

Answer 1

看起来您缺少了ant设计css样式表。

尝试在应用程序的根目录中添加以下行：

import 'antd/dist/antd.css';