修改组件默认样式

修改组件提供的默认样式为自己需要的样式，组件样式一般都是以 .ant- 开头的，自定义样式建议以 x- 开头

修改 react 组件样式

和 vue 不同 react 中使用 :global，不使用 :deep

当前页面全局修改

页面中的所有组件都起作用，在样式中使用 x-page 开头，x-page 是页面组件自带的样式。使用 :global 包含组件样式，在页面 css 文件中，添加如下代码

.x-page{
    :global{
        .ant-upload.ant-upload-select-picture-card{
            width: 200px;
            height: 200px;
        };
        .ant-btn{
            border-color: red ;
        }
    }
}

当前页面单个控制

以 ant- 开头的组件样式，外层需要使用 :global 才能生效

例如设置按钮和表头背景色，在按钮和表格组件上添加 x-green 样式，在页面 css 文件中添加如下代码

.x-page {
    :global{
        .x-green.ant-btn.ant-btn-default {
            background-color: red;
        }
        .x-green.ant-table-wrapper .ant-table-thead >tr>th {
            background-color: rgba(135, 207, 235);
        }
    }
}

整个应用全局修改

整个应用全局样式在 UI2/pcx/common.css 文件中定义，使用 :global 包含组件样式，示例代码如下

:global{
        .ant-btn{
            color: green;
        };
        .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
            color: red;
        };
        .ant-upload.ant-upload-select-picture-card{
            width: 300px;
            height: 300px;
        };
}

使用 common.css 文件需要在同级创建一个 common.js 文件，然后在 js 文件中引用 common.css，代码如下

import "./common.css";

修改 vue 组件样式

和 react 不同 vue 中使用 :deep，不使用 :global

当前页面全局修改

页面中的所有组件都起作用，在样式中使用 x-page 开头，x-page 是页面组件自带的样式。使用 :deep 包含组件样式，在页面 css 文件中，添加如下代码

.x-page {
    :deep{
        .ant-btn.ant-btn-default{
            background-color: rgba(255, 228, 225);
        }
    }
}

运行效果如下图所示

当前页面单个控制

分为两种情况

• 将样式定义到组件上即可生效：直接定义样式
• 将样式定义到组件内部才能生效：在样式中使用 :deep 包含组件内部样式

定义到组件样式上

例如设置按钮背景色，在按钮组件上添加 x-green 样式，在页面 css 文件中添加如下代码

.x-green.ant-btn.ant-btn-default {
    background-color: red;
}

运行效果如下图所示

定义到组件内部样式上

例如设置表头背景色，在表格组件上添加 x-green 样式，在页面 css 文件中添加如下代码

.x-green.ant-table-wrapper{
    :deep{
         .ant-table-thead >tr>th {
            background-color: rgba(135, 207, 235);
        }
    }
}

运行效果如下图所示

整个应用全局修改

整个应用全局样式在 UI2/pcx/common.css 文件中定义，示例代码如下

    .ant-btn.ant-btn-default {
        background-color: rgba(204, 179, 233);
    }

使用 common.css 文件需要在同级创建一个 common.js 文件，然后在 js 文件中引用 common.css，代码如下

import "./common.css";

组件样式

组件支持定义静态样式和动态样式，需要注意的是，设置动态样式后，静态样式不再生效

样式案例

使用系统提供的组件禁用样式(49)

一个可编辑的表单，如下图所示

设置数据只读后，表单组件显示只读样式，如下图所示

系统提供表单组件禁用样式 x-disabled-form，在表单组件上添加这个样式后，如下图所示

系统提供的样式

在企业门户的 UI2/pcx/common.css 文件中，定义了一个样式 x-disabled-form，在这个样式中，重新设置了输入框、日期选择框、选择器等表单组件的禁用样式，如下图所示

css 代码如下

:global{
    .x-disabled-form{
        .ant-input-disabled, .ant-input[disabled], .ant-input-number-disabled,
        .ant-input-number-disabled .ant-input-number-input,
        .ant-picker-disabled,
        .ant-picker .ant-picker-input >input-disabled, .ant-picker .ant-picker-input >input[disabled],
        .ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector{
            color: rgba(0, 0, 0, 0.88);
            background-color: transparent;
            border: none;
            cursor: default;
        }
        .ant-input-disabled::placeholder, .ant-input[disabled]::placeholder,
        .ant-picker .ant-picker-input >input-disabled::placeholder, .ant-picker .ant-picker-input >input[disabled]::placeholder {
            color: transparent; /* 使placeholder变为透明 */
        }
        .ant-picker-disabled .ant-picker-suffix,
        .ant-select-disabled .ant-select-arrow,
        .ant-select-disabled .ant-select-selection-placeholder{
            display: none;
        }
        .ant-switch.ant-switch-disabled *{
            cursor: default;
        }
        .ant-select-disabled.ant-select-multiple .ant-select-selection-item,
        .ant-radio-wrapper-disabled,
        .ant-radio-wrapper .ant-radio-disabled,
        .ant-radio-wrapper .ant-radio-disabled .ant-radio-input,
        .ant-checkbox-wrapper-disabled,
        .ant-checkbox-wrapper .ant-checkbox-disabled,
        .ant-checkbox-wrapper .ant-checkbox-disabled .ant-checkbox-input,
        .ant-checkbox-disabled + span{
            cursor: default;
            color: inherit;
        }
        .ant-radio-checked.ant-radio-disabled .ant-radio-inner,
        .ant-checkbox-checked.ant-checkbox-disabled .ant-checkbox-inner{
            background: var(--ant-primary-color,#1677FF);
            border-color: var(--ant-primary-color,#1677FF);
            opacity: 0.65;
        }
        .ant-radio-checked.ant-radio-disabled .ant-radio-inner:after{
            background-color: white;
        }
        .ant-checkbox-checked.ant-checkbox-disabled .ant-checkbox-inner:after {
            border-color: white;
        }
        .ant-slider.ant-slider-disabled{
            cursor: default;
        }
        .ant-slider.ant-slider-disabled .ant-slider-track{
            background-color: var(--ant-slider-track-bg,#91caff) !important;
        }
        .ant-slider.ant-slider-disabled .ant-slider-handle::after{
            cursor: default;
            box-shadow: 0 0 0 var(--ant-slider-handle-line-width,2px) var(--ant-slider-handle-color,#91caff);
        }
    }
}

设置表单的动态样式

给表单组件设置“动态 class”属性，当“页面参数.动作”等于 view 时，给表单组件添加 x-disabled-form 样式，设计界面如下图所示

点击动态 class 属性右侧的...按钮，打开“属性编辑-动态class”对话框，如下图所示。点击+按钮新增一个动态样式，在“样式”中输入 x-disabled-form

点击生效条件右侧的...按钮，打开“样式生效条件”对话框，如下图所示，设置条件为：当“页面参数.动作”等于 view 时生效，否则不生效

设置完毕，当再次点击查看按钮打开详情页面时，组件会使用系统提供的禁用样式展现