ReactJS --如何设置反应日历的样式

Question

我刚刚用以下方法安装了react-日历包

npm install react-calendar

但我不知道该如何设计它，或者给它一些颜色。反应-日历-国家预防机制中的说明没有提供有关这方面的任何信息。我想知道有没有人用过这个包裹能帮我这个忙。这是我的代码：

import React, {Component} from 'react'
import Calendar from 'react-calendar'
export default class EventModifier extends Component {

    state = {
        date: new Date(2018, 6, 1)
    }

render(){
let calendar = <Calendar onChange={this.onChange} value={this.state.date} onClickDay={(value) => alert("day" + value + "clicked")}/>
return(
<div>
{calendar}
</div>
)
}
}

Answer 1

使用className螺旋桨，它将与“React”一起添加到主React元素中。它可以用来按你的意愿来设定日历的样式。

<Calendar className={['c1','c2']}/>

Answer 2

转到node_modules / react-calender / dist / Calender.css，复制您自己的css或scss文件中的所有内容，在那里您将拥有所有默认样式，并且只能更改您想要的样式。

到目前为止，该文件如下所示：

​

.react-calendar {
  width: 350px;
  max-width: 100%;
  background: white;
  border: 1px solid #a0a096;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.125em;
}
.react-calendar--doubleView {
  width: 700px;
}
.react-calendar--doubleView .react-calendar__viewContainer {
  display: flex;
  margin: -0.5em;
}
.react-calendar--doubleView .react-calendar__viewContainer > * {
  width: 50%;
  margin: 0.5em;
}
.react-calendar,
.react-calendar *,
.react-calendar *:before,
.react-calendar *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.react-calendar button {
  margin: 0;
  border: 0;
  outline: none;
}
.react-calendar button:enabled:hover {
  cursor: pointer;
}
.react-calendar__navigation {
  height: 44px;
  margin-bottom: 1em;
}
.react-calendar__navigation button {
  min-width: 44px;
  background: none;
}
.react-calendar__navigation button:enabled:hover,
.react-calendar__navigation button:enabled:focus {
  background-color: #e6e6e6;
}
.react-calendar__navigation button[disabled] {
  background-color: #f0f0f0;
}
.react-calendar__month-view__weekdays {
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.75em;
}
.react-calendar__month-view__weekdays__weekday {
  padding: 0.5em;
}
.react-calendar__month-view__weekNumbers {
  font-weight: bold;
}
.react-calendar__month-view__weekNumbers .react-calendar__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75em;
  padding: calc(0.75em / 0.75) calc(0.5em / 0.75);
}
.react-calendar__month-view__days__day--weekend {
  color: #d10000;
}
.react-calendar__month-view__days__day--neighboringMonth {
  color: #757575;
}
.react-calendar__year-view .react-calendar__tile,
.react-calendar__decade-view .react-calendar__tile,
.react-calendar__century-view .react-calendar__tile {
  padding: 2em 0.5em;
}
.react-calendar__tile {
  max-width: 100%;
  text-align: center;
  padding: 0.75em 0.5em;
  background: none;
}
.react-calendar__tile:disabled {
  background-color: #f0f0f0;
}
.react-calendar__tile:enabled:hover,
.react-calendar__tile:enabled:focus {
  background-color: #e6e6e6;
}
.react-calendar__tile--now {
  background: #ffff76;
}
.react-calendar__tile--now:enabled:hover,
.react-calendar__tile--now:enabled:focus {
  background: #ffffa9;
}
.react-calendar__tile--hasActive {
  background: #76baff;
}
.react-calendar__tile--hasActive:enabled:hover,
.react-calendar__tile--hasActive:enabled:focus {
  background: #a9d4ff;
}
.react-calendar__tile--active {
  background: #006edc;
  color: white;
}
.react-calendar__tile--active:enabled:hover,
.react-calendar__tile--active:enabled:focus {
  background: #1087ff;
}
.react-calendar--selectRange .react-calendar__tile--hover {
  background-color: #e6e6e6;
}

​

Answer 3

导入'./Calender.scss'；

          <Calendar  onChange={onChange}  value={state.date} className="react-calendar" />

Calender.scss

反应-日历{宽度:600；

.react-calendar__navigation {
    .react-calendar__navigation__arrow {
        display: none;
    }

    .react-calendar__navigation__label {
        font-size: 32px;
    }
}

.react-calendar__tile {
    height: 70px;
}

.react-calendar__month-view__weekdays__weekday {
    font-size: 16px;
    color: rgb(15, 70, 15);
}

.react-calendar__tile--active {
    background: #e70220;
    color: white;
}

.react-calendar__tile--active:enabled:hover,
.react-calendar__tile--active:enabled:focus {
    background: #e70220;
}

.react-calendar__tile,
.react-calendar__month-view__days__day {
    font-size: 18px;
}

}