Ant Design Vue 中重写form表单样式

Ant Design Vue 中重写form表单样式

Ant Design Vue 中form表单样式不符合项目要求,使用全局style重写

主要使用:  <style lang="scss">   </style>

demo:

<template>
    <div class="study02"> <!--使用一个class 防止其他页面冲突 study02-->
        <h3> form 表单 重写全局样式 </h3>
        <a-form layout="inline" :form="form">
            <a-form-item label="大飞">
                <a-input placeholder="请输入"></a-input>
            </a-form-item>
            <a-form-item label="大飞大飞大飞" >
                <a-input placeholder="请输入"></a-input>
            </a-form-item>
        </a-form>
    </div>
</template>
<script>
    
    /* 这是ant-design-vue */
    import Vue from 'vue'
    import Antd, { message,Select } from 'ant-design-vue'  //这是ant-design-vue
    import 'ant-design-vue/dist/antd.css'
    Vue.use(Antd);
    /* 这是ant-design-vue */
    
    export default {};
</script>

<style lang="scss" scoped>
    /*  只在组件内生效 */
</style>
<style lang="scss">
    /*  覆盖全局样式  */
.study02{ /* 使用一个class 防止其他页面冲突 study02 */
    .ant-form-item {
        margin-right: 0;
        .ant-form-item-label{
            width: 50px;
            background-color: #f0e68c;
        }
        .ant-input{
            width: 60px;
            background-color: #add8e6;
        }
    }
}
</style>