哇！门户居然还能这样自定义样式~零衍门户提供了自定义组件功能，用户可以自定义出满足需求的新组件，自定义组件功能还有另一种

引言

零衍门户为各种组件提供了丰富的样式配置，可以搭建出多种风格的门户，然而现有的配置始终无法覆盖全部的场景，您在搭建门户的过程中是否也有这样的苦恼？感觉组件样式配置不够灵活，尤其是基于组件库实现的标准组件难以对其样式进行更改，无法满足客户对于样式的个性化需求。

零衍门户同样考虑到了这种情况，提供了自定义组件功能，用户可以自定义出满足需求的新组件，然而如果用户只想要进行样式定制的话，从“0”开始开发一个新组件就显得太过繁琐，因此自定义组件功能还有另一种巧妙的用法——上传自定义的样式文件就可以实现对门户某个组件的样式的进行覆盖。

今天我们将介绍一下如何妙用自定义组件来覆盖门户组件的样式。

首先，我们需要新建一个文件夹将其命名为static，在static文件夹下再新建一个文件夹并命名为css，在css文件夹就可以编写你的css样式代码了，文件夹结构如下图所示：

在编写样式文件时需要注意，为了避免覆盖的样式相互影响，请以单一门户组件为维度编写css样式代码，我们为每一个门户组件添加了各自的类名标签，在对某一个组件进行样式覆盖时将对应的css代码写在对应组件的类名下，以下是各个组件与类名标签的映射关系：

以Tab组件为例，在css文件中先写出Tab组件对应的类名tab-component，再在下面根据实际需要编写样式代码即可。

在准备好需要的样式代码文件后，我们来配置一个用来进行样式覆盖的自定义组件。首先打开零衍的门户组件管理功能并新建一个组件，组件类型选择为自定义组件。

选中刚才新建的自定义组件进行配置，上传我们准备好的static文件夹压缩后的文件。值得一提的是自定义组件这里上传的配置文件是支持多版本管理，可以方便的进行调整以及不用担心配置丢失，上传文件并发布后即可生成一个新的组件版本。

在完成自定义组件配置后，在门户看板配置页面，将刚才新建的自定义组件添加到门户中，因为这个组件不需要实际渲染出来，所以建议添加到悬浮图层中，同时在右侧属性面板的数据Tab下选择之前在门户管理处新建的自定义组件以及对应版本。

至此，一个可以覆盖门户组件样式的自定义组件就配置完成了。

让我们以Tab组件的样式覆盖为例来看看实际的效果，我们提供的Tab组件标准样式如下图所示：

接下来让我们看看在门户添加了我们刚才配置的自定义组件后的效果。如下图所示，可以看到Tab组件的边框以及选中状态发生了明显的变化，说明样式覆盖已经生效。此处仅展示了较为简单的样式，实际上这种覆盖方式的自由度非常高，如果需要更丰富的样式，可以在css代码中自由发挥哦~

以上就是如何通过自定义组件覆盖单一门户组件样式的介绍，可以看到整个配置过程并不繁琐且自由度很高，是否为您在配置门户组件样式时提供了一种新思路，解决了个性化需求配置的烦恼呢？

零衍致力于系统管理降本增效，让系统管理变得更简单。欢迎联系零衍运营人员申请试用~

操作手册：

文档>技术产品>零衍系统管理平台KINGPAAS

试用零衍管理平台期间，若您有任何问题需要咨询，都可前往焱牛开放平台（open.hand-china.com）提反馈，或将疑问发往联系邮箱，我们有专业人员针对您的问题进行解决回复，有技术精良的研发团队根据您的反馈进行应用优化。期待您的反馈，我们将用心对待每一份回应。