css - 在不同页面上 react 大日历 CSS 覆盖

Question

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

我试过在 css 中使用 important 标签，但它只能修复一个页面并干扰其他页面

第一个文件 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 ;
}

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

.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>