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

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

相关推荐
前后端杂货铺1 分钟前
uniapp利用生命周期函数实现后台常驻示例
android·前端·ios·微信小程序·uni-app
大道归简1 小时前
案例:自动化获取Web页面小说(没钱修什么仙)——selenium
前端·selenium·自动化
Deepsleep.7 小时前
东田数码科技前端面经
前端·科技·面试
涵信8 小时前
第十八节:开放性问题-Vue生态未来趋势
前端·vue.js·devops
牧杉-惊蛰8 小时前
css 数字从0开始增加的动画效果
前端·javascript·css
孤灯淡茶8 小时前
Fiori学习专题十五:Nested Views
前端·javascript·学习
green_pine_8 小时前
CSS学习笔记14——移动端相关知识(rem,媒体查询,less)
前端·css·笔记·学习·less
Monly218 小时前
Vue:el-table-tree懒加载数据
前端·javascript·vue.js
进取星辰9 小时前
16、路由守卫:设置魔法结界——React 19 React Router
前端·javascript·react.js
清羽_ls9 小时前
cURL 入门:10 分钟学会用命令行发 HTTP 请求
前端·curl·命令行工具