React Big Calendar CSS overriding on different pages

Question

i have setup react big calendar on two different pages and have applied some styling on it through external CSS

i have tried using important tag in css but it only fix one page and disturb other

First file CSS

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

Second file CSS

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

i want to achieve different CSS on both pages but end up fixing one and disturbing other

Answer 1

Update

This is how I'd approach things using 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"))

And the 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

---

You need to introduce greater specificity in your CSS . For example, start with a base style that works for the default case and, most importantly, is available to all pages, globally.

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

Then, extend from there using another class . This would be declared on another page.

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

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

And so on…

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

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

Answer 2

Don't know whether its an elegant solution,but was able to resolve my issue by enclosing my component in another div and overriding that div eg

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

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

in css I did

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