基本布局可以使用我上一篇文章中描述的技术进行更改，大数据的发展前景，点击这里可以找到这些技术。

但是如果组件的标准SAP样式不符合业务设置的要求，您会怎么做？有可能告诉业务部门没有办法改变这一点，但如果有一个标准样式的组件解决方案呢？

如果我们使用开发者工具在Google Chrome中浏览Design Studio仪表盘的生成页面，我们会看到定制CSS表添加在所有标准SAP CSS表后面。这使得覆盖SAP定义的布局成为可能。

图12：在标准SAP CSS文件后面添加自定义CSS文件

表示您有许多按钮组件，它们需要在整个应用程序中具有相同的布局。有两种方法可以实现这一点：

为每个报表创建一个定制的CSS类，该类可用于报表的每个按钮组件在通用CSS文件（跨应用程序）中创建一个自定义CSS类，该类对所有报表都是通用的更改SAP提供的标准CSS类。

所有选项都可以实现相同的目标，但如果您想要创建公司特定的模板，则第一个选项的创建工作更为繁重，尤其是要适应公司想要进行的任何布局更改。当有一个中心CSS定义适用于该公司，并且公司颜色发生变化时，只需在一个地方进行更改，大数据应用，每个仪表板都是最新的布局，在第一个选项中，必须检查每个仪表板，并可能进行调整。

找到正确的类

如果我们以一个按钮为例，希望更改该按钮的悬停布局，则需要知道必须更改的类。这可能是一开始的一点尝试和错误，特别是对于使用大量CSS类的组件。为此，我使用了googlechrome开发工具和inspect元素选项。

在下面的示例中，我将把组件的悬停颜色和边框颜色更改为橙色。

图13：悬停按钮组件

如上面的屏幕截图所示，按钮悬停时为深灰色，边框为深灰色。当我们检查元素时，我们看到使用了以下CSS类：

图14：按钮组件的SAP CSS类

如果我们还添加了一个下拉组件并查看此组件的CSS，我们会看到以下CSS类。

图15：下拉组件的SAP CSS类

正如您在上面的屏幕截图中看到的，它是很明显，大数据行业分析，标准组件中使用的大多数CSS类（如果不是全部的话）都有相同的前缀"sapUi"。

覆盖样式表

当我们回到最初的需求时，要更改按钮的悬停颜色和按钮的边框，我们现在必须探索并适应对标准CSS类的更改。这也可以在googlechrome开发者工具的inspect元素特性中完成。在googlechrome中执行应用程序时，有三种可能打开开发人员工具。有两个键盘快捷键，分别是"F12"或"CTRL+SHIFT+i"，或者您可以按以下步骤使用菜单。

单击Google Chrome中的"…"—图标

导航到"更多工具"并选择"开发者工具"

使用上述三种方式之一时，将打开下一个屏幕。

图16：处理按钮的CSS类边框–更改前

图17：处理按钮边框的CSS类–更改后

第一部分是边框的颜色更改。不过，我们也需要改变颜色时，平销返利，悬停边界将仍然采取黑色作为边界颜色。悬停部分的信息也可以在inspect元素的样式部分中查看。这可以用来改变开发工具中样式部分的元素状态，如下图所示。

图18：处理按钮边框和背景的CSS类–此时悬停元素状态

，我们只需在自定义CSS文件中复制/粘贴需要从现有样式更改的CSS类的名称。

图19：用自定义样式覆盖标准CSS类

保存并运行应用程序时，我们在应用程序中看到了所需的适当布局。

图20：边框颜色更改为橙色的结果

图21：边框和背景颜色更改为橙色的结果

注意：请注意，标准CSS类在整个应用程序中使用。因此，云端服务器，通过覆盖标准CSS样式，当您不希望在应用程序的其他部分中更改标准组件时，这可能会导致相互冲突的结果，而这是不希望的。但是对于CSS，也有一些方法仅当一个类是另一个CSS类的子类时才将样式应用于该类。另一个CSS类可以是在组件的属性中定义的CSS类。关于这一点，我将不详细介绍，但如果您想了解更多，请留言。

祝您造型愉快！