Css от DatePicker выглядит не очень хорошо - PullRequest
Новая
       8

Css от DatePicker выглядит не очень хорошо

0 голосов
/ 09 июня 2019

Я разрабатываю приложение в 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;
  }

Я хочу, чтобы фон был фиксированного цвета, а не прозрачным.

1 Ответ

1 голос
/ 09 июня 2019

Это потому, что в .example-config вы используете фоновый цвет как rgba и альфа-средство, которое используется для непрозрачности, что делает его прозрачным, поэтому вместо rgba используйте rgb.

Например 

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