css - 在不同页面上覆盖 React Big Calendar CSS

Question

我已经在两个不同的页面上设置了反应大日历，并通过外部 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，但最终修复了一个并干扰了另一个

Answer 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">…&lt;/div>

等等……</p>

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

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

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