javascript - DatePicker的css看起来不太好

Question

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

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

在 App.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>

在 App.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 并且它用于不透明度的手段 alpha 使其透明，所以而不是 rgba 使用 rgb。

例如

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