主题样式

概述

在某些特定情况下，织信平台预设的样式可能无法满足实际需求，需要进行调整。为解决这个问题，织信平台提供了由设计人员编写 CSS样式的选项，设计人员可以在应用设计器内编写 CSS 样式，实现对默认样式的调整和覆盖。平台提供了应用主题和模块主题 的设置能力以实现分块的概念，从而提升模块访问时的加载和渲染的效率。

使用前瞻

在使用主题样式对应用进行个性化样式调整时，需要设计人员了解CSS的相关概念。对于不熟悉前端开发的人员，可通过学习 CSS：层叠样式表提高对 CSS 的掌握

CSS相关概念

• 语言语法和形式
• 特殊性（另译优先级）、继承 和级联
• 盒模型 和外边距合并
• 包含块
• 堆叠上下文 和区块格式化上下文
• 初始值、计算值、应用值 和实际值
• CSS 简写属性
• CSS 弹性盒子布局
• CSS 网格布局
• 媒体查询
• 动画

平台实现

平台应用设计器支持对应用和模块进行独立的 CSS 样式设置。主题样式在用户进入应用或模块会自动挂载样式， 用户离开应用或模块会自动卸载样式。

平台内对元素的CSS class 进行了规范，我们可以通过对应用的 class 覆盖实现对应用的个性化展示；考虑到平台底层版本升级过程中可能会改动已有的 class 名称，平台也在对应的 class 基础上增加了以theme-为前缀的样式，该类样式在平台升级时不会发生改变，以保证样式的兼容性。

使用主题样式自定义对话框样式

以下的示例利用css样式，修改了系统的默认对话框样式，增加了边框和标题文字背景色

.el-dialog{
    border: 2px solid #666 !important;
}
.informat-dialog-title{
    position: relative;
}
.informat-dialog-title::after{
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0;
    background: rgb(141 244 157 / 50%);
    border-radius: 5px;
    width: 30px;
    height: 10px;
}

使用主题样式数据表模块样式

/* 条件选择样式覆盖 */
.app-module-Table.app-module-x1744czcz3blh .filter-item-op-condition-label {
    background: rgb(99,163,228);
    color: #fff;
}

/* 顶部工具栏 */
.app-module-Table.app-module-x1744czcz3blh .table-module-toolbar {
    background: linear-gradient(90deg, transparent, rgb(225, 243, 216), transparent);
}

/* 过滤条件 */
.app-module-Table.app-module-x1744czcz3blh .table-side-view .el-input__inner,
.app-module-Table.app-module-x1744czcz3blh .table-side-view .simple-select {
    background: #fff;
    border: 1px solid #ddd;
}

.info-view-box .form-opt-box, .record-opt-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    top: auto;
}