修改组件默认样式

修改组件提供的默认样式为自己需要的样式，组件样式一般都是以 .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";

组件样式

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