css盖过element UI不生效

最新推荐文章于 2022-06-11 14:06:15 发布
最新推荐文章于 2022-06-11 14:06:15 发布
阅读量307 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47333020/article/details/109610553
版权

错误描述

在这里插入图片描述
这时原来的样式
由于表单的长度太长了
所以向加一个滚动条
在浏览器端先调试
在这里插入图片描述
将调试结果复制到style样式里
在这里插入图片描述
刷新页面
在这里插入图片描述
样式依然没有变化
考虑到可能时优先级的问题
在样式里加上！important
在这里插入图片描述
刷新，依然没改变。。。。

错误原因

由于我在style样式上加了scoped属性
这个属性会使得其包裹的样式只能在本页面里的元素享受到
而我要改变的elementUI的样式
所以解决就是把scoped属性删去即可
在这里插入图片描述
在这里插入图片描述
这个属性时当初为了防止样式污染而添加的
没想到现在卡了我半小时。。。。

it界的哈士奇
关注
专栏目录
Vue-cli脚手架项目引入Element-Ui不生效问题
weixin_43403746的博客
09-27 2107
背景： 已经很久没有初始化项目了，今天在初始化项目引入element-ui插件时发现居然没有生效，最直观的就是没有标签提示。我是通过npm安装element-ui。 npm i element-ui -S 然后在main.js文件中引入了安装好的element-ui并使用。 但使用时并没有标签提示，而且效果也没有出来。 解决方案： 查了后才发现，除了要引入element-ui外，还需要引入它对应的css包，也就是需要将下面这句话写入到main.js中。 import ‘element-ui/lib
elementUI组件修改样式 覆盖无效
吴冬雪的博客
05-31 7330
为了vue页面样式模块化，不对全局样式造成污染，我们往往都会加入scoped属性用来限制样式的作用域，然而这也会导致当我们修改部分ui组件样式失效。为了避免这种情况，我们常用以下方式来解决。通过 >>> 可以使得在使用scoped属性的情况下，穿透scoped，修改其他组件的值。在我们使用第三方UI组件库开发时有时需要对这些组件进行一些样式修改。深度选择器/deep/与>>>作用相同。
(javascript)vue项目打包后，写的覆盖element的样式无效了。这是什么原因？
学习笔记666
08-20 9375
问题： (javascript)vue项目打包后，写的覆盖element的样式无效了。这是什么原因？描述: 在开发模式模式下，写的覆盖样式都有效，打包后就无效，请问下是什么原因? main.js里的css加载顺序 开发模式下 打包后在浏览器查看 解决方案1: 你的问题就是css权重问题 如果相同权重可能存在引入顺序问题 简单粗暴解决办法  1： 如果是单页面 写入index.htm...
element-ui无法覆盖样式解决办法一
Ryan_black的博客
03-05 3001
我添加的样式: <el-card class="myself"> </el-card> <style> .myself{ background-color: blue; color: blue; position: absolute; width: 500px; height: 700px; left: 60%;...
[vue]饿了么的element-ui修改样式后不生效
weixin_34162695的博客
01-30 1062
2019独角兽企业重金招聘Python工程师标准>>> ...
elementui自定义样样式文件无法覆盖问题
aigan8378的博客
06-16 500
et 生成的文件需要在use之后使用，不然无法覆盖原来样式Vue.use(ElementUI);import '../theme/index.css' 转载于:https://www.cnblogs.com/shenssr/p/11029534.html
Element UI主题样式文件
最新发布
04-07
Element UI 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的组件，如表格、按钮、对话框、通知等，便于快速构建美观且功能强大的 Web 应用。在 Element UI 中，主题样式文件是实现自定义界面颜色和风格...
element ui 不生效
09-14
综上所述，当Element UI样式不生效时，你可以检查样式的层级结构，避免被其他样式覆盖或影响，并尝试使用作用域样式或CSS Modules来解决全局样式影响的问题。如果还有其他特定的问题，你可以参考相关文档或解决方案...
vue element 项目默认css文件 style
01-02
在`styles`文件中，你可以定义全局CSS变量、通用的样式规则，或者是一些Element UI组件的自定义样式。例如，你可能想要改变Element UI的默认主题色，可以在这里定义CSS变量，然后在组件样式中引用它们： ```css /* ...
解决Vue的项目使用Element ui 走马灯无法实现的问题
10-15
import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` ### 引入走马灯组件 在 Element UI 官网上，可以找到走马灯组件的详细说明和代码示例。引入走马灯组件到项目中之后，可以通过在 HTML ...
Vue 修改 Element-UI 组件的原生样式
qq_39249627的博客
06-11 1908
Vue 修改 Element-UI 组件的原生样式
震惊！！！一眼就能看懂的element-ui引入和修改样式问题！！！！
m0_52009348的博客
07-09 349
安装使用element-ui框架 (1)下载指令 npm i element-ui -S (2)在main.js中引入 import Vue from ‘vue’; import ElementUI from ‘element-ui’; import ‘element-ui/lib/theme-chalk/index.css’; import App from ‘./App.vue’; Vue.use(ElementUI) 更改element ui 的三种方式 (1)给组件加上id或者class，然后添加一
关于 Element-UI 不生效 CSS样式不生效问题
weixin_42648006的博客
05-20 3721
1、未单独引入css文件 在main.js中单独引入一下文件 import 'element-ui/lib/theme-chalk/index.css'; 2、vue.config.js配置错误 将以下属性设置成了false，去掉文件名中的 .module 默认值为true，注释即可 // requireModuleExtension: false ......
vue+elementUI修改样式不生效的解决过程
qq_38024443的博客
01-10 5862
学校大作业，我负责的前端部分，正好前段时间学习了vue和elementUI，就来实践一下，部分代码如下： <div class="ipInput"> <el-input class="ip" v-model="part1"></el-input> ...... </div> 后来我发现在el-input舔加样式使文字居中但并没有生效 <div class="ipInput"> <el-input class=
element-ui修改样式不生效
热门推荐
松烟入墨
11-05 1万+
关键词：scoped，sass,css 问题 覆盖默认的element-ui css不生效 操作 如下图所示，想要去除lable中的padding-bottom，自然而然地打开控制台，找到当前的css 当前css: 修改为：padding: 0，运行发现样式没有生效 原因 代码中使用scoped之后，保证各文件中的css不相互影响，给每个component都做了唯一的标记 &lt;style...
关于vue+elementui设置div背景图片填充不生效问题
菜鸡奋斗ing的博客
07-15 5888
正常css填充div图片背景 .itemDiv { background-size: 100% 100%; background-repeat: no-repeat; background-image: url(../../images/Tickets_background.png); } 但是在vue项目中不生效，需要改成如下。 .tip-div { positio...
ElementUI自定义CSS样式不生效的解决方案
weixin_44863091的博客
11-26 6594
例如有一个输入框 <el-input ref="mySearch" class="mySearch" size="small" placeholder="请输入内容" suffix-icon="el-icon-search" v-m...
tailwindcss在Vue2使用，不生效解决
xxx
03-23 1万+
直接安装 npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 创建postcss.config.js // postcss.config.js module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, } } 创建tailwind.config.js npx tailwindcss i
vue第三方组件如elementUI修改css无效的问题
weixin_41597344的博客
09-02 1863
一、Scoped 在我们写vue的css是通常会<style scoped lang="xxxx"></style> 其中scope的含义是其CSS只在当前组件中生效，这是个很好的属性，让开发者之间的css不互相污染。但是当使用第三方库如elementUI时，往往不能改变其CSS。 使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值