DatePicker的css看起来不是很好

Question

我在ReactJS中开发了一个应用程序，我需要一个DatePicker组件。

我插入了它，我在CSS方面做了一些工作，但我不知道为什么日历的背景是透明的，也就是说，在选择下面的日期时可以看到它。

在应用程序中.js文件：

         <div className="row">
            <div className="example-config col-xs-12 col-md-12 example-col">
                <p>The period selected is: <br />
                    start: {`${this.state.value.start}`}<br />
                    end: {`${this.state.value.end}`}
                </p>
            </div>
            <div className="col-xs-12 col-md-12 example-col">
                <p className="choose">Choose dates:</p>
                <DateRangePicker className="Calendar"
                    value={this.state.value}
                    onChange={this.handleChange}
                />
            </div>
        </div>

在应用程序中.css文件：

.example-col { 
    display: inline-block; 
    vertical-align: top; 
    padding-right: 20px; 
    padding-bottom: 20px;
    border-radius: 25px;
  }
  .example-config {
    margin: 0 0 20px; 
    padding: 20px; 
    background-color: rgba(0,0,0,.03);
    border: 1px solid rgba(0,0,0,.08); 
    border-radius: 25px;
  }

我希望背景是固定的颜色，而不是透明的。

Answer 1

这是因为在.example-config中使用背景颜色作为rgba和 a 手段 alpha 它用于使其透明的不透明度，因此而不是rgba使用 rgb .

例如

background-color: rgb(0,0,0);