React Big Calendar CSS overriding on different pages - css

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 e.g
<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;
}