为什么我的CSS自定义样式表规则会被覆盖而不能在SAPUI5中应用?

时间:2018-09-17 13:23:37

标签: css sapui5

我已经创建了一个带有列表的SAPUI5应用程序,并希望使用css为CustomListItems着色。

我的风格总是被树液风格所取代。我不知道该如何订购...

我还尝试过直接在元素中实现样式...

有人可以帮我吗?

CSS

.itemOpen{
  background-color: #FA5858
 }

XML页面

<Page title="Simple Kanban Board">
    <content>
        <HBox width="100%">
            <List id="lstOpenItems" items = "{kanban>/OPEN}" width="100%" class="sapUiResponsiveMargin">
                <headerToolbar>
                    <Toolbar>
                        <Title text="offene Aufgaben" level="H2" />
                    </Toolbar>
                </headerToolbar>
                <items >
                    <CustomListItem class="itemOpen" style="background-color:#FA5858">
                        <VBox class="sapUiSmallMargin sapUiSmallMarginTopBottom">
                            <Title titleStyle="H3" text="{kanban>NAME}"  />
                            <Text text="Description1" />
                        </VBox>
                        <!-- <VBox class="sapUiSmallMargin">
                            <Text text="Description2" />
                            <CheckBox selected="{NotApplicable}" select="onNACheckBoxSelect" />
                            <RatingIndicator value="{RatingValue}" maxValue="{MaxValue}" change="onRatingChanged" />
                            <Text text="{ path: 'RatingValue', formatter: '.formatter.ratingText' }" />
                        </VBox> -->
                    </CustomListItem>
                </items>
            </List>
        </HBox>
    </content>
</Page>

Screenshot from Chrome Element Inspector

1 个答案:

答案 0 :(得分:1)

请在您的!important中将style.css添加到相应的样式属性:

.itemOpen {
  background-color: #FA5858 !important;
}

!important属性将相应元素的规则置于第一位。它说这是需要应用于各个元素的规则。具有!important属性的规则将覆盖其他更特定的CSS规则。