Question

我刚刚使用

安装了react-calendar软件包

npm install react-calendar

但是我不知道如何设置样式或给它添加颜色。 react-calendar - npm中的说明未提供任何有关此信息。我想知道是否有人使用过此软件包可以帮助我。这是我的代码：

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

转到 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 2

使用 className 道具，该道具将与“ react-calendar”一起添加到主React-Calendar元素中。并可以根据需要为日历设置样式

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

Answer 3

导入'./Calender.scss';

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

Calender.scss

.react-calendar { 宽度：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;
}

}

Answer 4

转到您的node_modules/react-calender/dist/Calender.css并更改样式。例如，更改背景颜色或行高或宽度。

.react-calendar {
  width: 350px;
  max-width: 100%;
  background: black;
  border: 1px solid #a0a096;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.500em;
}

别忘了import 'react-calendar/dist/Calendar.css' in your component

ReactJS-如何设置React日历的样式

4 个答案: