Custom background color flexbox

Issue

I want to set background color on flexbox and tried as follow.

Class definition on app:

<App id="app" class="weight-protocol"></App>

on FlexBox:

  <FlexBox
      height="20%"
      width="100%"
      alignItems="Start"
      class="calendar-header-bg"
      justifyContent="Center">

in the css file:

.weight-protocol .calendar-header-bg {
    background-color: #007DB2;
}

The custom background color is not going to apply at all as you can see:

Look at the code inspector, the custom css class stays at the beginning calendar-header-bg instead at last.

Solution

Did you try without .weight-protocol ?

.calendar-header-bg {
    background-color: #007DB2;
}

If not work you can use !important tag:

.calendar-header-bg {
    background-color: #007DB2 !important;
}

You can also try use only background tag instead background-color:

.calendar-header-bg {
    background: #007DB2 !important;
}

I hope this helps...

Good Luck!

Answered By - ℛɑƒæĿᴿᴹᴿ