在不同页面上覆盖 React Big Calendar CSS答案

【问题标题】：React Big Calendar CSS overriding on different pages在不同页面上覆盖 React Big Calendar CSS
【发布时间】：2019-04-16 23:56:22
【问题描述】：

我在两个不同的页面上设置了响应大日历，并通过外部 CSS 对其应用了一些样式

我曾尝试在 CSS 中使用重要标签，但它只能修复一个页面并干扰其他页面

第一个文件 CSS

.rbc-timeslot-group {
    min-height:120px ;
    /* border-left: 1px solid #000000 */
}

第二个文件 CSS

.rbc-timeslot-group {
    min-height:20px ;
    /* border-left: 1px solid #000000 */
}

我想在两个页面上实现不同的 CSS，但最终修复了一个并干扰了另一个

【问题讨论】：

标签： css reactjs react-big-calendar

【解决方案1】：

更新

这就是我使用React/JSX 处理事情的方式：

class Demo extends React.Component {
  render() {
    const BigCalendar = ({classes}) => (
        <div className={`rbc-timeslot-group ${classes}`}></div>   
    )

    return (
      <div>
        <BigCalendar />
        <BigCalendar classes="second" />
        <BigCalendar classes="third" />      
      </div>
    )
  }
}

ReactDOM.render(<Demo />, document.querySelector("#app"))

还有CSS

.rbc-timeslot-group {
  width: 50px;
  height: 50px;
  background-color: red;
}

.rbc-timeslot-group.second {
  background-color: green;
}

.rbc-timeslot-group.third {
  background-color: blue;
}

jsFiddle

您需要在您的CSS 中引入更大的特异性。例如，从适用于默认情况的基本样式开始，最重要的是，它可用于全局的所有页面。

.rbc-timeslot-group {
  min-height: 120px ;
}

然后，使用另一个class 从那里扩展。这将在另一个页面上声明。

.another-page.rbc-timeslot-group {
  min-height: 20px;
}

<div class="rbc-timeslot-group another-page">…</div>

等等……

.yet-another-page.rbc-timeslot-group {
  min-height: 40px;
}

<div class="rbc-timeslot-group yet-another-page">…</div>

【讨论】：

【解决方案2】：

不知道它是否是一个优雅的解决方案，但能够通过将我的组件包含在另一个 div 中并覆盖该 div 来解决我的问题，例如

  <div className="first">
      <BigCalendar>
      </BigCalendar>
  </div>

  <div className="second">
      <BigCalendar>
      </BigCalendar>
  </div>

在 CSS 中我做了

.first.rbc-timeslot-group{
 min-height:20px !important; 
 }
.second.rbc-timeslot-group{
 min-height:20px !important; 
 }

【讨论】：

请参阅我的 React 特定更新。它允许您删除额外的包装器div。