css стилизация заголовка и содержимого поповера. цвет фона для нескольких всплывающих окон, использующих пользовательский класс - PullRequest
Новая
       8

css стилизация заголовка и содержимого поповера. цвет фона для нескольких всплывающих окон, использующих пользовательский класс

0 голосов
/ 27 января 2020

Я использую реагировать bootstrap, чтобы добавить несколько всплывающих окон с другим цветом фона заголовка всплывающего окна, используя класс css, чтобы изменить цвет. До сих пор, когда я перемещаю указатель от popover к popover, заголовок popover имеет тот же цвет. Любая помощь приветствуется. 

in JSX
<Popover id="1" title="test" className={getPopOverStyling(id)}>Test Content</Popover>

getPopOverStyling(id) {

  if (id === 1) {
    return "red"
  } else if (id === 2) {
    return "blue"
  } else if (id === 3) {
    return "green"
  }
}

in my css

.popover-title {
  height: 25px
  color: #ffffff
  font-size: 18px
  font-weight: bold
}

// for each of my following color, I want to reuse the popover-title styling

.red, .popover-content {background-color: #ffffff} .popover-title{background-color: red}

.green,  .popover-content {background-color: #ffffff} .popover-title{background-color: green}

.blue, .popover-content {background-color: #ffffff} .popover-title{background-color: blue}

Я пытался переключить цвет фона, но не уверен, как это сделать.

...