elementUI样式不起作用

最新推荐文章于 2024-01-17 17:57:45 发布
最新推荐文章于 2024-01-17 17:57:45 发布
阅读量833 收藏
点赞数
分类专栏： 解决bug 找bug 文章标签： vue js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42815873/article/details/118340944
版权

elementUI样式不起作用

在确定以下条件没有问题后
1、mian.js
import ElementUI from “element-ui”;
import “element-ui/lib/theme-chalk/index.css”;
Vue.use(ElementUI);

2、所写网页的信息有无跟data的对应上后

有可能是这样的问题：

vue.config.js里的requireModuleExtension:false

改成requireModuleExtension:true
或者改成modules: false

由于我之前用的是modules，会报出

 WARN  "css.modules" option in vue.config.js is deprecated now, please use "css.requireModuleExtension" instead.

这样的警告
所以我用了requireModuleExtension

双击空格001
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element-ui踩坑
ligoudan233的博客
07-08 3265
element-ui踩坑 1.使用websocket给前端vuex中传值并将vuex中的值实时渲染到页面表格 在element-ui中提供的表格样式中,默认以:data="tableData"的形式传入表格数据,其中tableData在vue中以data函数的方式return出来,例如: data() { return { tableData: [{...
修改elementUI的样式
11-02
修改ElementUI组件样式的几种方法
el-table-column 的label-class-name和class-name冲突
weixin_35749440的博客
01-10 1558
el-table-column 的 label-class-name 和 class-name 是两个不同的属性，label-class-name 用来为表格列的标题设置 class，而 class-name 则是用来为整列设置 class。它们不会直接冲突，但是如果你在这两个属性中都设置了相同的 class，那么为标题和整列都会应用该 class。 如果你想要更精细的控制表格列样式，可以通过设置...
Elementui设置样式不起效
qq_43750656的博客
11-14 5259
在使用ElementUI时，其渲染的dom元素有时是在模板外的，虽然代码写在了vue文件对用的模板内，但elementui在渲染的时候可能会渲染到和body一级。 如这种弹窗，有时候想给这种el-dialog加个样式，发现是不起效的，原因是 在写样式的时候加了scoped，也就是这些样式只对本组件内的dom元素有效，虽然el-dialog代码写在了本组件里，但真正弹窗渲染的时候，elementui不一定是在本组件渲染，所以此时样式就失效了。此时就需要写到全局样式里了。 ...
vue组件中使用elementUI样式(row-class-name)无效问题
热门推荐
momDIY的博客
11-25 1万+
问题描述 vue项目中，需要给vue表格中的每一行加入自定义的样式，根据文档给<el-table>组件加上row-class-name属性即可，直接加入该属性并且在当前vue组件中配置对应class发现样式并没有生效。 解决方案 1.使用全局属性 在elementUI中，row-class-name、row-style、cell-class-name等属性要想生效必须使用全局class...
elementui样式不生效
ANNENBERG的博客
08-25 1382
在main.js中引入js和css样式 挂载为vue的插件,如果这几步都没有问题,但是element的样式还是不显示!可以看一下vue.config.js文件中的css配置项,改成true。
element-ui级联选择器数据转化，以及解决显示不生效问题
超级罗伯特的博客
06-25 897
在项目中会用到各类的数据类型，前端需要给后台传匹配的数据，难免前台做数据转换，本次分享级联选择器中树结构数据转化的一种方式，需求多选情况下，如果之选一级传一级id，如果选择二级单位则传一级id和二级id，并以数组形式。重点来了，数据处理内容，需要数据，把二级数组转变为一级数组，数组的flat() 方法，
解决vue+elementui项目打包后样式变化问题
10-15
确保在Vue组件中使用`<style scoped>`时，排除ElementUI的样式文件，或者在`vue-loader`配置中为ElementUI的CSS开启全局作用域。 4. **浏览器兼容性** 需要检查项目是否针对所有目标浏览器进行了充分的兼容性测试...
ElementUI静态主题样式包，实现elementui动态换肤
01-09
ElementUI静态主题样式包,包含light-theme.css和dark-theme.css，还有对应的字符集，下载后放到static目录下，在index.html中引用即可，可在项目中动态修改此路径，实现换肤
axure-elementui.zip
12-31
ElementUI 的组件包括但不限于以下几类： 1. 基础组件：按钮、图标、加载提示、栅格系统、布局、颜色等，这些是构建页面的基本元素。 2. 表单组件：输入框、选择器、日期选择、滑块、开关等，用于用户数据的输入和...
ElementUI 登录页
06-17
这些组件已经预先封装好样式和交互，极大地提高了开发效率。 在项目的目录结构中，“my-project”应该是项目的主要文件夹，里面包含了项目的所有源代码。通常，Vue.js 项目会有一个 `src` 目录，其中包含 `App.vue`...
解决使用elementUi时修改样式无效果问题
前端之行，任重道远！
07-29 1520
在使用elementUi里Tabs 标签页时发现怎样都改变不了标签字体的大小 直接修改是无效的 需要加入 important与/deep/ /deep/.el-tabs__item { font-size: 16px !important; } 以此类推，修改elementUi其它的地方发现没效果时应该也能用此方法 ...
vue-element 遇到的问题
燃燃的大尾巴
10-12 288
element-ui中的el-table-column使用v-if导致列位置与数据错乱 错误代码 <div v-if="form.dimension == '1'" style="display:inline-block"> <el-table-column align="center" sortable label-class-name="text-blue-900" prop="attendanceCount" label="打卡" min-width="100" /> &lt
解决el-descriptions的label-class-name不生效问题
一只没有脚的鸟
06-20 3156
解决el-descriptions的label-class-name不生效问题
表单中css有些不起作用
yaoyao159的专栏
01-28 4398
    写了一个表单，在使用css时发现了一些问题。    1、定义label的style不起作用，例如，我在css中定义了一个<!-- label { font-size:large; }--> mylabel { font-size:lar
使用element插件中Descriptions遇到的坑
xioxi
01-13 1万+
使用Descriptions 描述列表中的自定义label，打包后点击按钮新增一个el-descriptions-item时，最后一个item的标题发生改变 解决办法： 将以下代码替换 <el-descriptions-item label-align="center"> <template #label> <div class="cell-item"> <span c
elementUI使用table组件中的row-class-name属性不生效的问题
qq_44864879的博客
07-18 4938
在elementUI中，row-class-name、row-style、cell-class-name等属性要想生效必须使用全局class才能生效。
element中表格组件的row-class-name和class-name属性的使用以及无效处理
最新发布
kanno的博客
01-17 2384
element中表格组件的row-class-name和class-name属性的使用以及无样式效果的处理
用了elementui中的组件，设置样式时始终不生效的解决方案
qq_52526079的博客
11-24 2796
后使用到里面样式的dom会添加data-v-xxxx这种属性防止css污染，但是message生成的dom是没有添加data-v-xxx属性的，所以样式无效。原因：可能是因为加了。
修改elementui默认样式加deep不起作用
03-31
如果您想修改 ElementUI 的默认样式，可以使用 SCSS 变量或者覆盖样式。但是，如果您的样式不生效，可能是因为 CSS 的选择器优先级问题。 在 CSS 中，选择器的优先级是根据不同的选择器组合来计算的。通常来说，ID 选择器的优先级最高，其次是类选择器和属性选择器，最后是元素选择器。在 ElementUI 中，大部分的样式都是使用类选择器来设置的。 如果您想在修改 ElementUI 样式时优先级更高，可以添加 `!important` 来使样式生效。例如： ```css .el-button { background-color: red !important; } ``` 但是，使用 `!important` 会让样式变得难以维护和调试，因此建议尽量避免使用。如果您的样式没有生效，可以尝试使用 `deep` 关键字来加强选择器优先级。例如： ```css ::v-deep .el-button { background-color: red; } ``` 在这个例子中，`::v-deep` 是 Vue 提供的一种选择器，可以穿透子组件，加强选择器优先级。注意，`::v-deep` 只在 Vue 2.x 中可用，在 Vue 3.x 中已经被废弃，可以使用 `::v-slotted` 来代替。 另外，如果您使用的是 Vue CLI 3.x 或 4.x，可以在 `vue.config.js` 中配置 `css.loaderOptions` 来全局修改 ElementUI 样式。例如： ```js module.exports = { css: { loaderOptions: { scss: { additionalData: ` @import "~element-ui/packages/theme-chalk/src/common/var.scss"; @import "~element-ui/packages/theme-chalk/src/common/mixins.scss"; `, }, }, }, }; ``` 在这个例子中，我们通过 `additionalData` 导入了 ElementUI 的 SCSS 变量和混合，以便在自定义样式中使用。注意，需要安装 `sass-loader` 和 `sass` 才能使用 SCSS。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值