tailwindcss如何改变antd子组件的样式

开发项目使用的是 tailwindcss ，当我们使用一些第三方组件的时候，有些时候需要改变第三方组件的样式，接下来我简单演示一下

假如我们的项目使用的是 react + tailwindcss + antdesign 

关于 react 中如何使用 tailwindcss 可以看一下这篇文章

如何在 React 中引入 Tailwind CSS：完整指南_react tailwindcss-CSDN博客

我们以把下拉选择框的箭头去掉为例

我现在 App.js 中的代码为

import { Select, Space } from 'antd';
const handleChange = value => {console.log(`selected ${value}`);
};function App() {return (<div className="App"><SelectdefaultValue="lucy"style={{ width: 120 }}onChange={handleChange}options={[{ value: 'jack', label: 'Jack' },{ value: 'lucy', label: 'Lucy' },{ value: 'Yiminghe', label: 'yiminghe' },{ value: 'disabled', label: 'Disabled', disabled: true },]}/></div>);
}export default App;

我们在引入 tailwindcss 的文件加上这个，表示类名为 ant-select-arrow，并且是 arrow-none 的后代的元素会被隐藏

@tailwind base;
@tailwind components;
@tailwind utilities;@layer components {.arrow-none .ant-select-arrow{@apply hidden}
}

之后我们在 App.js 中给 Select 组件加上类名 arrow-none

打开页面就没有那个箭头了