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

Question

我在两个不同的页面上设置了 React 大日历，并通过外部对其应用了一些样式 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">…</div>

等等……

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

<div class="rbc-timeslot-group yet-another-page">…</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; 
 }

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

React Big Calendar CSS overriding on different pages

css

reactjs

react-big-calendar

更新