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表示为不透明性使其透明，因此使用{{1}而不是rgba }。

例如

rgb

DatePicker的CSS看起来不太好

1 个答案: