DatePicker的CSS看起来不太好

Question

I develop an application in ReactJS and I need a DatePicker component.

I inserted it, I worked a bit on the CSS side but I do not know why the background to the calendar is transparent, that is, it can be seen when selecting the date below.

In App.js file:

         <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>

In App.css file:

.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;
  }

I want the backgound to be a fixed color, not to be transparent.

Answer 1

This is because in .example-config you are using background color as rgba and a means alpha it is used for opacity which makes it transparent, so instead of rgba use rgb .

For example

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