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">
      <Select
      defaultValue="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

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

相关推荐
星晨雪海9 分钟前
怎么格式化idea中的vue文件
前端·vue.js·intellij-idea
没事多睡觉66615 分钟前
Vue 虚拟列表实现方案详解:三种方法的完整对比与实践
前端·javascript·vue.js
white-persist26 分钟前
Burp Suite模拟器抓包全攻略
前端·网络·安全·web安全·notepad++·原型模式
ObjectX前端实验室39 分钟前
【前端工程化】脚手架篇 - 模板引擎 & 动态依赖管理脚手架
前端
GISer_Jing1 小时前
前端GIS篇——WebGIS、WebGL、Java后端篇
java·前端·webgl
excel1 小时前
Vue3 EffectScope 源码解析与理解
前端·javascript·面试
细节控菜鸡1 小时前
【2025最新】ArcGIS for JS 实现地图卷帘效果
开发语言·javascript·arcgis
不老刘2 小时前
Base UI:一款极简主义的「无样式」组件库
前端·ui
祈祷苍天赐我java之术2 小时前
Redis 有序集合解析
java·前端·windows·redis·缓存·bootstrap·html
ObjectX前端实验室3 小时前
【react18原理探究实践】React Effect List 构建与 Commit 阶段详解
前端·react.js