tailwindcss + element plus 自动引入时，el-button样式被覆盖的问题

已于 2022-06-27 11:02:21 修改
阅读量6.2k 收藏 8
点赞数 8
文章标签： vue javascript
于 2022-04-01 22:36:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45042868/article/details/123909412
版权

问题描述

在安装了tailwindcss + element plus 时，会发现el-button的样式被tailwindcss的样式给覆盖了，（目前也只遇到button被覆盖的情况）。

问题分析

是样式加载顺序的问题

解决办法

https://github.com/element-plus/element-plus/issues/5693

全部引入时

可以通过调整引入element plus的样式和tailwindcss的样式的顺序
先引入tailwindcss的样式，然后在引入element plus的样式，以便让element plus的样式覆盖tailwindcss的样式。
在这里插入图片描述

自动引入时

如果使用了自动引入，光是使用上面的方法，则只会在开发环境有效，在项目打包后，button的样式仍然被tailwindcss的样式覆盖。在github关于这个问题的描述上，我看到个通过配置tailwindcss的插件，来注册样式的方法来覆盖默认的样式。不过这个方法，我遇到了一个小问题，就是打包后的，text类型的按钮也被应用这个样式，于是就得全局给text类型的按钮样式 加个!important
在这里插入图片描述

在这个问题的答案上又看到一种解决办法，虽然没试过，但先记录一下

在这里插入图片描述

goms
关注
  • 8
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
tailwind-override:覆盖 Tailwind CSS 类
05-31
Tailwindcss 覆盖 一种删除冲突的 Tailwindcss 类的函数，其中最右边的一个获胜。 例子： overrideTailwindClasses ( "pt-2 pt-4" ) ; // => 'pt-4' overrideTailwindClasses ( "text-pink-200 text-blue-200" ) ; // => 'text-blue-200' overrideTailwindClasses ( "text-pink-200 pt-2" ) ; // => 'text-pink-200 pt-2' (don't clash) overrideTailwindClasses ( "orange apple" ) ; // => 'orange apple' (not tailwind classes) 这有助于定义可重写顺风类的React组件。
HTML-引入Vue3和Element Plus
04-24
这将引入Element Plus的CSS样式文件和JavaScript库，确保所有组件样式和功能可以正常工作。 然后，在HTML中创建一个Vue实例，并挂载到页面元素上。Vue3引入了Composition API，使得代码更加模块化。在`index.html`...
解决tailwind与element样式冲突
qq_43548590的博客
12-01 1210
去node_modules里找到tailwindcss，把preflight.css拷贝一份放在项目中公共样式文件夹下，然后把影响到button的部分注释掉。打开F12查看按钮样式，发现是被Tailiwind的样式覆盖了，Tailwind采用的是属性选择器的方式来设置样式。el-button按钮在没有设置plain的情况下背景透明了，文字颜色也不对。拷贝到项目styles文件夹下并注释掉button的样式。prefight.css位置如下。
vue3+element-plus引入tailwindcss导致样式错乱问题
最新发布
my_darling_的博客
05-28 378
部分允许你完全禁用 Tailwind 通常默认生成的类。在tailwindcss.config.js中加入这段。
vue3中element-plus弹窗el-dialog的样式覆盖
程先生的博客
07-19 2184
element-plus;vue3;el-dialog;样式覆盖
vue+elementui项目打包后样式变化问题
Arlisol的博客
02-24 8717
博主刚刚解决了index.html空白问题，刚打开项目页面又发现了样式出现了大问题，样式与开发版本有很大不同，有些样式没有生效。利用搜索引擎，找到了问题所在以及解决办法： main.js中的引入顺序决定了打包后css的顺序，组件内的样式没有生效可能是被第三方组件样式覆盖了，所以把第三方组件放在前面引入，router放在后面引入，就可以实现组件样式在第三方样式之后渲染。代码如下： main.js /...
element-plus自动导入
qq_38902432的博客
10-07 2703
element-plus的自动导入
【vue3】tailwindcss和element-plus打包后样式覆盖解决方案
weixin_51083890的博客
07-18 1320
这几个方法都试一试，因为我是用了按需导入element-plus，所以tailwindcss打包后还是会覆盖样式，然后就找了各种方法，全怼上去了。甭管啥，往最上面放就完事儿了。
element-ui 的el-button组件中添加自定义颜色和图标的实现方法.docx
01-13
"element-ui 的 el-button 组件中添加自定义颜色和图标的实现方法" 在 Element UI 中，el-button 组件是非常常用的一个组件，但是默认情况下，它的颜色和图标都有限制。如果我们想要添加自定义的颜色和图标，该如何...
jsp中使用vuejs+element-ui+vuejs第三方组件
02-17
2. **引入样式和脚本**: 在JSP页面中，引入Element-UI的CSS和JS文件。 ```html <link rel="stylesheet" href="node_modules/element-ui/lib/theme-chalk/index.css"> <script src="node_modules/element-ui/lib/...
Vue3+element-plus+axios 综合小案例
09-26
Element Plus是Element UI的升级版，为Vue3提供了丰富的组件和设计样式。它包括表格、按钮、输入框、下拉菜单等常见的UI元素。Element Plus的组件易于使用，只需要在Vue3项目中安装并导入相应的组件，然后在模板中...
Element_Plus 分页组件 内部样式修改（较详细）
08-11
前后端分离项目
Vue3 Element Plus表格导入导出示例
07-15
首先，我们需要在项目中引入Element Plus库。如果你还没有安装，可以通过npm或yarn进行安装： ```bash npm install element-plus # 或者 yarn add element-plus ``` 在`main.js`文件中，我们需要全局注册Element ...
关于element-ui的样式覆盖问题
Growing up Or Growing old
10-21 4887
关于element-ui组件样式深度覆盖不生效的解决办法以及注意事项
Button 一直显示在View的最上层，无法被其他View覆盖
一品大帅的专栏
05-21 3582
问题 Button一直显示在当前view的最上层，无法被其他view覆盖。 解决方法 XML android:stateListAnimator="@null" Java button.setStateListAnimator(null); 此问题从5.0开始，stateListAnimator是用来实现Material Design 效果。 ...
解决Naive UI和Tailwindcss样式覆盖问题【日常记录，可供参考】
^Being^
05-06 1711
当项目中同时使用到 Naive UI 和 Tailwindcss 时，出现了样式覆盖问题，Tailwindcss 样式直接将 Naive UI 样式覆盖导致无法正常使用
tailwind与element样式冲突
qq_39174318的博客
06-26 633
tailwind的样式覆盖element的样式。el-button在没有设置plain的情况下背景透明了，文字颜色也不对。
vue - tailwindcss 和 element-ui 冲突处理
寿春
02-24 3173
其实情况也比较简单，也就是先引入tailwindcss 再引入element-ui 这样element-ui就会覆盖掉tailwindcss。elementui 样式 import ‘element-plus/es/components/dialog/style/css’在使用tailwindcss 情况下，有时候会导致element-ui的样式失效最常见的是butten按钮的样式就变了。所以在保证tailwindcss的情况下对于element覆盖的样式再重新定义。引入tailwindcss。
如何局部覆盖element-ui的默认样式
热门推荐
林钹渊的博客
06-07 5万+
最近项目中遇到的问题，只想在某个组件里面更改element-Ui的样式，而不影响全局。在网上看了很多瞎jb扯的东西，根本不适用或者没效果。 先手直接说方法：在需要更改的组件里新增一个style标签【重点：不要加scoped】，然后直接获取class设置样式就可以咯，class自己去浏览器里右键审查元素可得到。 建议：在获取到的样式里加上能限制范围的父层选择器，不然就变成全局样式咯。 &lt...
vue3+element plus+typescript实现el-dialog弹框拖拽并添加详细注释，要是公共方法，其他多个组件可以调用
05-26
好的，下面为您提供一份实现el-dialog弹框拖拽的代码，包含详细注释，并且可以作为公共方法供其他组件调用。 首先，我们先创建一个mixin，命名为`dialogDragMixin.ts`，在该文件中实现弹框拖拽的功能。 ```typescript import { DirectiveBinding } from 'vue'; import { ElDialog } from 'element-plus'; // 定义接口，用于存储弹框的位置信息 interface DialogPosition { top: number; left: number; } // 定义一个变量，用于存储弹框的位置信息 let dialogPosition: DialogPosition = { top: 0, left: 0 }; export default { // 指令钩子函数，当元素插入到 DOM 中时执行 mounted(el: HTMLElement, binding: DirectiveBinding) { // 获取el-dialog组件实例对象 const dialog: ElDialog = binding.instance.$parent as ElDialog; // 获取弹框的标题栏元素 const dialogHeaderEl: HTMLElement = el.querySelector('.el-dialog__header')!; // 设置标题栏的样式，使其可以被拖拽 dialogHeaderEl.style.cursor = 'move'; dialogHeaderEl.style.userSelect = 'none'; // 鼠标按下事件处理函数 const handleMouseDown = (event: MouseEvent) => { // 记录鼠标按下时的位置信息 dialogPosition.top = dialog.$el.offsetTop; dialogPosition.left = dialog.$el.offsetLeft; // 记录鼠标按下时的坐标信息 const mouseX = event.clientX; const mouseY = event.clientY; // 鼠标移动事件处理函数 const handleMouseMove = (event: MouseEvent) => { // 计算鼠标移动时的偏移量 const offsetX = event.clientX - mouseX; const offsetY = event.clientY - mouseY; // 更新弹框的位置信息 dialog.$el.style.top = dialogPosition.top + offsetY + 'px'; dialog.$el.style.left = dialogPosition.left + offsetX + 'px'; }; // 鼠标抬起事件处理函数 const handleMouseUp = () => { // 移除鼠标移动事件处理函数和鼠标抬起事件处理函数 document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mouseup', handleMouseUp); }; // 添加鼠标移动事件处理函数和鼠标抬起事件处理函数 document.addEventListener('mousemove', handleMouseMove); document.addEventListener('mouseup', handleMouseUp); }; // 添加鼠标按下事件处理函数 dialogHeaderEl.addEventListener('mousedown', handleMouseDown); } } ``` 接下来，我们在需要使用该mixin的组件中引入它，并将其添加到`mixins`属性中即可。 ```vue <template> <el-dialog title="Dialog Title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" v-dialogDrag > <span>Dialog Content</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">Cancel</el-button> <el-button type="primary" @click="dialogVisible = false">Confirm</el-button> </span> </el-dialog> </template> <script lang="ts"> import { defineComponent } from 'vue'; import dialogDragMixin from './dialogDragMixin'; export default defineComponent({ name: 'MyComponent', mixins: [dialogDragMixin], data() { return { dialogVisible: false }; }, methods: { handleClose(done: () => void) { this.$confirm('Confirm to close this dialog?') .then(() => { done(); }) .catch(() => {}); } } }); </script> ``` 最后，我们可以将`dialogDragMixin`作为一个公共方法，供其他多个组件调用。在`main.ts`中，全局注册该mixin即可。 ```typescript import { createApp } from 'vue'; import App from './App.vue'; import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; import dialogDragMixin from './dialogDragMixin'; const app = createApp(App); // 注册全局mixin app.mixin(dialogDragMixin); app.use(ElementPlus).mount('#app'); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值