关于修改Antd默认样式的注意事项

怎么把默认样式修改成自己想要的样式?
首先要知道组件的各种类名,以及它的默认样式是怎么样的,才方便去修改:
1.打开控制台,可以直接按F12,也可以右击页面,点击检查
2.Elements中可以看到你的页面元素,点击左边的箭头,可以移动到页面上,右边会显示相应的元素位置.
3.可以清楚看到组件的默认样式以及class名称,如果对样式不熟悉,在下方能进行修改,可以直观的看到页面变化,没有问题再写到自己的样式文件中,如果有被-----划掉的属性,说明优先级不够,可以通过!important去提高优先级,z-index是提高层的优先级,决定让哪一个层处于上层.
案例展示：
比如我现在要找这个按钮的样式:

打开控制台:



倘若找到样式之后：

.ant-input{
    height: 300px;
    }

如果不是在改页面中全部的按钮都是要求的样式的的话，那么就需要对这个按钮上一级的也带进来作为对指定按钮的限制。（因为倘若这样修改的话，相当于把全局的输入框ant-input的高度都改成了height:300px了，不可取!!!）
[因为我只想要单独设置这一个模态框的样式而已，所以我们可以在这个类的上层再加一层用于识别（跟我们css权重应用一样的道理）。] 如下：

<template>
  <div class="container">
    <h1>3D沉浸式商城</h1>
    <div class="box">
      <a-space direction="vertical">
        <div class="oo">
          <a-input-search
            v-model:value="value"
            placeholder="input search text"
            @search="onSearch"
          />
        </div>
      </a-space>
      <a-space direction="vertical" :size="12">
  </a-space>
      </div>
    </div>
</template>

.oo{
    width: 800px ;
    height: 100px;
    background-color: brown;
    .ant-input{
      height: 300px;
    }
  }