react中如何修改antd 样式而不影响全局

案例：

//app.jsx
import Tab1 from "./components/tab1/tab1.jsx"
import Tab2 from "./components/tab2/tab2.jsx"
function App() {

  return (
    <div className='app'>
      <Tab1></Tab1>
      <Tab2></Tab2>
    </div>
  )
}
//tab1.jsx
import "./tab1.less"
function Tab1() {
  const onChange = (key) => {
        console.log(key);
  };
  return (
    <div className="tab1">
    aawewe
      <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
    </div>
  )
}
//tab2.jsx
import "./tab2.less"
function Tab1() {
  const onChange = (key) => {
        console.log(key);
  };
  return (
    <div className="tab2">
      <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
    </div>
  )
}

export default Tab1

方案一：命名空间 + antd class方案（直接给组件外层添加一个类名没然后在其下找到对应antd组件类名进行修改）

tab1.less

.tab1 .ant-tabs-tab{ font-size: 48px !important; }

方案二： cssmodule+:global

本例因为采用vite生成的react项目。而vite本身是支持cssmodule的，但是需要对后缀名称进行修改，比如.index.css需要改成.index.module.css; （1）把tab1.css改成tab1.module.css (2)

 .tab1{
     color:aqua; 
    :global{
        .ant-tabs-tab{
            font-size: 48px !important;
        }
        
    }
 }

或者写成：

 .tab1{
     color:aqua; 
    :global(.ant-tabs-tab){
        
            font-size: 48px !important;
       
        
    }
 }