自定义背景颜色弹性框答案

【问题标题】：Custom background color flexbox自定义背景颜色弹性框
【发布时间】：2017-04-30 19:33:36
【问题描述】：

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

应用上的类定义：

<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。

【问题讨论】：

【解决方案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;
}

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

祝你好运！

【讨论】：

【解决方案2】：

我猜问题是特异性也称为选择器的重要性。这意味着您正在使用的选择器（嵌套在类中的类）总体上的权重很小，并且很可能被您正在使用的库中的另一个更重的选择器覆盖。例如，该库可能以 id 内的类中的类为目标或类似的东西。

我的建议是查看开发工具中应用的样式，看看是什么覆盖了您的样式，然后决定是否要使您的选择器更强大（通过使其更具体）或者只是在您的 background-color 之后添加 !important声明。

【讨论】：

【解决方案3】：

FlexBox 不应该有一些 css 来完成您想要实现的目标吗？使用检查器并注意包含 flexbox 的 div。能具体点吗？

【讨论】：