修改组件默认样式

场景描述

修改组件提供的默认样式为自己需要的样式

实现思路

用:global通过全局或者单独修改默认样式组件样式(一般都是.ant-开头的)实现

实现步骤

1.当前页面全局修改

当页面中的组件有定义中的样式都会起作用，在当前页面的css文件中如下定义：

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

在页面组件的预定义样式上添加custom

2.当前页面单个控制

只在设置预定义样式元素的子元素中有定义的样式的组件起作用，在当前页面的css文件中如下定义：

.button-demo {
    :global {
        .ant-btn {
            border-color: red;
        }
    }
}

在需要重写样式的组件的祖先级元素预定义样式添加button-demo，也可以在组件的外层加一个区块或者行列等组件在区块或列的预定义样式上添加button-demo

3.整个应用全局修改

整个应用全局定义样式可以在/pcx/common.css文件中如下两种写法都可以，使用common.css文件需要在同级创建一个common.js文件，然后在js文件中导入common.css即可

import "./common.css";

第一种：

:global(.ant-btn){
            border-color: red;
}

:global(.ant-upload.ant-upload-select-picture-card){
        width: 200px;
        height: 200px;
}

第二种：

: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;
        };
}

也可以在某个.w的css文件中定义上面的样式，运行时打开过这个功能后后面打开的功能才起作用