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

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

相关推荐
他们叫我秃子7 分钟前
从 0 到 1,我用小程序 + 云开发打造了一个“记忆瓶子”,记录那些重要的日子!
前端·微信小程序·小程序·云开发
非凡ghost8 分钟前
Subtitle Edit(字幕编辑软件) 中文绿色版
前端·javascript·后端
用户842981424181011 分钟前
10个JavaScript编程实用技巧
javascript
扎瓦斯柯瑞迫12 分钟前
cursor: 10分钟魔改环境、优雅获取Token
前端·javascript·后端
王六岁12 分钟前
🐍 前端开发 0 基础学 Python 入门指南:条件语句篇
前端·python
San3015 分钟前
CSS3 星球大战:用前端技术打造震撼的3D动画效果
前端·css·html
用户120391129472616 分钟前
从零构建一个HTML5敲击乐Web应用:前端开发最佳实践指南
前端
Violet_YSWY19 分钟前
将axios、async、Promise联系在一起讲一下&讲一下.then 与其关系
开发语言·前端·javascript
San3023 分钟前
扩展卡片效果:用 Flexbox 和 CSS 过渡打造惊艳交互体验
前端·javascript·css
写代码的皮筏艇26 分钟前
JS数据类型转换
前端·javascript