修改 antd 默認的樣式

第一、根據官網的API進行修改

第二、直接添加樣式進行修改

如果不能直接修改樣式的組件，該怎么修改它的默認樣式呢？看下面這個例子，它是antd Form表單的一個小組件，該怎么修改下面這段小紅字的默認狀態呢？

 

 

再來看看它的代碼

      <FormItem style={{marginBottom:'0px'}} >
                {getFieldDecorator("phoneNo", {
                  rules: [
                    {
                      required: true,
                      message: "請輸入手機號"
                    },
                    {
                      validator:((rule,value,callback)=>{
                        if(!(/^1[3456789]\d{9}$/.test(value))){
                          callback("請輸入正確的手機號碼格式")
                        }
                        else{
                          callback()
                        }
                      })
                    }
                  ],
                  initialValue:mobile
                })(
                  <Input
                    placeholder={"請輸入手機號"}
                    style={{height:'40px'}}
                    onChange={this.getItemsValue}
                  />
                )}
              </FormItem>

 

 它是由callback直接返回的，沒辦法直接修改。

打開編譯器，找到這個元素。

 

 

 

 

 拿到這個名字，直接在代碼上進行修改。

在我們拿到的這個名字前面加:global(),把名字寫在括號里面，直接寫上你想要修改的樣式就可以了。

:global(.has-error .ant-form-explain){
  position: absolute;
  
}

這樣直接修改會破壞其他的組件的樣式，可以在你想要修改樣式的標簽外面定義一個父級元素，在用一個父級選擇器就可以了。