自定义背景颜色flexbox

Question

我想在flexbox上设置背景颜色并尝试如下。

app上的类定义：

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

FlexBox上的

：

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

在css文件中：

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

您可以看到自定义背景颜色根本不适用：

查看代码检查器，自定义css类最后停留在calendar-header-bg的开头。

Answer 1

你没有.weight-protocol尝试过吗？

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

如果不起作用，您可以使用!important标记：

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

您也可以尝试仅使用background代码background-color：

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

我希望这会有所帮助......

祝你好运！

Answer 2

FlexBox不应该有一些css来做你想要实现的目标吗？使用检查员，并观察融合flexbox的div。 你能更具体一点吗？

Answer 3

我猜这个问题是特异性，也称为选择者的重要性。这意味着您正在使用的选择器（类嵌套在类中）总体上几乎没有重量，并且很可能被您正在使用的库中的另一个更重的选择器覆盖。例如，库可能是在id或类似内容的类中定位类。

我的建议是在开发工具中查看应用的样式，查看覆盖样式的内容，然后决定是否让选择器变得更强（通过使其更具体）或者只是在!important之后添加background-color {1}}声明。