Реагирование переопределения CSS большого календаря на разные страницы - PullRequest
Новая
       20

Реагирование переопределения CSS большого календаря на разные страницы

0 голосов
/ 17 апреля 2019

У меня есть настройка, реагирующая на большой календарь на двух разных страницах, и я применил к нему некоторые стили с помощью внешнего 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 на обеих страницах, но в итоге исправлю одну и потревожу другую

Ответы [ 2 ]

1 голос
/ 17 апреля 2019

Обновление

Вот как я подхожу к вещам, используя 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;
}

enter image description here

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>
0 голосов
/ 17 апреля 2019

Не знаю, является ли это элегантным решением, но смог решить мою проблему, заключив мой компонент в другой 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; 
 }
...