如何调整第三方组件antd-mobile的样式

#1

调用antd-mobile的组件SearchBar，由于字体大小为30px，感觉太大了，想调整小一些。但发现无法通过css模块化的方式调整SearchBar中元素的样式。想打算用jQuery来在组件加载完毕后操作，但我认为肯定有更好的方式。请问该如何操作呢？

jsx中调用SearchBar组件

<SearchBar placeholder="搜索" className={styles.searchBar} />

DOM中是这样的

<form class="am-search SearchBarExample__searchBar-39jNG">
  <div class="am-search-input">
    <div class="am-search-synthetic-ph" style="width: 100%;">
      <span class="am-search-synthetic-ph-container">
        <i class="am-search-synthetic-ph-icon"></i>
        <span class="am-search-synthetic-ph-placeholder" style="visibility: visible;">搜索</span>
      </span>
    </div>
    <input type="search" class="am-search-value" value="" placeholder="搜索">
    <a class="am-search-clear"></a>
  </div>
  <div class="am-search-cancel am-search-cancel-anim" style="margin-right: -80px;">取消</div>
</form>
#2 
global(.am-search){
  //你需要覆盖的样式
}

如果是less文件，则是

:global(.am-search){
  //你需要覆盖的样式
}
#3

https://ant.design/docs/react/customize-theme-cn