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>