如何优雅地修改antd组件内部样式

前言

在前端领域，antd无疑是react生态下使用最为广泛的UI类库，antd对常见的表单类输入组件进行了高度封装，带来开箱即用的便利性，但是与此同时，对其样式的控制也愈发困难。大家应该都有过被产品或者交互逼着修改antd样式的经历。次数多了，很难再通过"这是开源的控件，样式不好修改"搪塞过去。那么问题来了，如何优雅第修改antd的样式?

具体方法

经过探索，大致有以下几种思路：

1. 直接添加类名或者style
   这个是最常规的方法，能够直接作用于当前的元素，但是有的时候我们会发现antd的组件最终在dom层中有很多的层级嵌套。仅仅使用对外层元素进行修改并且让子元素继承样式的方法并不能完全达成目的；这个时候很自然的想法就是使用css的选择器来检索下级元素，大致的代码逻辑如下：

import s from './index.css';
import {
    Input, AutoComplete } from 'antd';
//  ...省略无关代码
    <div className={
   s.feeWrap}>
        <Input
            disabled
            value={
   lanWrap('Transfer fee')}
            addonAfter={
   fee}
            className={
   cx(s.feeInput, 'tInput')}/>
    </div>

css代码

.feeInput .ant-input {
   
    background-color: #ffffff !important;
    font-size: .14rem;
    color: #555555  !important;
    user-select: none;
}

接下来我们来检测下成果。

输入框的背景颜色并没有如我们预期地发生改变。接下来我们分析下具体原因，从上面的截图中可以看到，antd组件内部的css类名并没有被css mo