解决vue组件中给body设置样式不起作用的简单办法

最新推荐文章于 2024-03-20 18:14:38 发布
原创 最新推荐文章于 2024-03-20 18:14:38 发布 · 9.9k 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了如何为模板中的首个div元素设置特定的样式属性，包括绝对定位、尺寸覆盖整个视窗、滚动条显示条件、背景颜色等，确保了页面布局的一致性和美观性。

给template中的第一个div设置如下样式 

.body-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow-y: auto;
  background-color: #000;
}

 

Ant Design of Vue 中的Card 卡片的headStyle和bodyStyle设置
weixin_40425415的博客
09-27 3万+
从官网上可以看到Card的相关使用和APIhttps://vue.ant.design/components/card-cn/ 这里可以看到headStyle 和 bodyStyle 的类型都是object，但是为它赋值的需要注意一些问题。 如果只设置一个样式，可以直接在行内写 <a-card title="title" :bordered=false :headStyle="...
Vue之style的用法
热门推荐
chaofei_liang的博客
09-23 5万+
Vue中style的用法总结如下： v-bind:style  简写:style 1.基本用法 .red{ color: red; } .blue{ background: blue; }
vue之style样式处理
seimeii的博客
04-27 972
1.对象语法 <div v-bind:style=" {color: activecolor， fontsize: fontsize } "></div> 2.数组语法 <div v-bind: style=" [ basestyles,overridingstyles] "></div> 3.示例 <!DOCTYPE html> <html lang="en"> <head> <meta charse
Vue-cli 中为单独页面设置背景色的方法
qq_26982559的博客
04-14 1万+
例子：                                 支付成功                 学车所需资料                   学车考照流程               1.如果直接在css中设置body的background-color，会导致其他页面的背景色响应改变，所以不可取；
vue body样式不生效
weixin_35752645的博客
01-10 2242
您好！如果您的 vue 组件的 body 样式不生效，可能有以下几种原因： 您的样式规则可能被其他样式规则覆盖了。在检查样式规则时，请确保 body 样式规则在后面。 您的样式规则可能没有正确应用到 body 元素上。确保样式规则中的选择器与 body 元素匹配。 如果您使用了 style 标签或 style 属性来应用样式，请确保这些样式在您的 vue 组件的 template 中。 如...
vue设置body样式不生效
desongzhang的博客
06-09 4190
去掉scoped 属性，这个表示它的样式作用于当下的组件，使得该css样式不影响到其他组件或本组件的子组件，也保护的本组件的样式不受其他组件影响。 <style lang="less" > @import "./assets/css/reset.css"; @import "./assets/iconfont/iconfont.css"; // 滚动条样式 /* 设置滚动条的样式 */ ::-webkit-scrollbar { width: 5px; } /* 滚动槽 */ ::-web
vue-改变body的css样式
weixin_48111439的博客
12-01 2989
vue-改变body的css样式 beforeCreate() { document.querySelector('body').setAttribute('style', 'background-color:#f4f4f4; color:#666666;') }, beforeDestroy() { document.body.removeAttribute('style') },
Vue中html、body设置背景色不能覆盖全局
wsx981049288的博客
05-27 548
观察了下，在vue页面中设置html和body的背景色是无法覆盖全局的。所以可以在App.vue中，设置。
在Vue项目中设置样式不效果(作用)时,很可能引入全局统一样式,想要单独设置样式,使用深度选择器
m0_49714202的博客
02-10 1435
原因: 全局引入同一个样式的时候,比如表格表头,单独设置样式不起作用, 个人觉得应该是引入全局样式覆盖单独设置样式,这时候必须用深度选择器 后台管理,商城等等偶需要引入全局样式便捷这是需要用到深度选择器 深度选择器语法: (1) .XXX /deep/ .XXX (2) .XXX >>> .XXX elementUI表格案例: 注意:如果设置class不起作用就F12控制查看位置,对应class名称 下面案例就需要F12查看对应class尤其elementUI的class不好找名称 //
Vue中引入样式文件的方法
12-03
第三种方法是在单个Vue组件（`.vue`文件）中引入样式。在组件的`<style>`标签中，我们可以直接引用SCSS文件，但需要注意的是，如果不在`main.js`中先引入SCSS文件，Vue可能不会正确解析SCSS，导致样式失效。例如： ...
解决Vue 3在使用element-plus时重写样式不起作用的问题
一起学习
08-27 3421
本文主要介绍Vue 3在使用element-plus时重写样式不起作用的几种情况。
Vue3 - Element Plus 模态框Dialog、Drawer抽屉框，将append-to-body设置为true后，使用deep覆盖样式失效解决办法（将弹框插入到body中样式覆盖失败）
🏆 前端领域优质创作者
03-20 4596
vue3，element-plus，el-drawer，el-dialog，抽屉弹框，对话框模态框，append-to-body，插入到body中无法使用deep覆盖样式，deep失效了怎么办，当设置append-to-body=true时如何覆盖组件样式，改不了弹框样式，elementPlus弹窗Dialog添加append-to-body后修改原样式无效，如何解决使用append-t后覆盖修改样式不生效，嵌套的append-to-body属性导致内层弹框样式设置不上，append-to-body后更改d
vue如何修改子组件内部样式的同时不影响原组件样式在父组件中的使用
weixin_46353030的博客
12-05 2152
思路 在父组件中引入子组件时，为子组件起一个class名称； 用深度监听器/deep/修改：在父组件的style样式里用该class名称 /deep/ 子组件内待修改的class名称的格式 子组件Button.vue <template> <div class="button"> <div class="button-out"> <div class="button-in">button</div> </d
vue.js body的css不生效
weixin_43744709的博客
05-14 1520
因为style上有scoped标签，去掉即可。 <style> /* 此处如果有scoped 则body的css内容不生效*/ body{ margin:0px; padding:0px; font-family: "微软雅黑"; font-size: 16px; } </style> Vue中的scoped属性 在vue组件中，在style标签上添加scoped属性，以表示它的样式作用于当下的组件，使得该css样式不影响到其他组件或本组件的
Vue中全局引入stylus文件不生效的问题
热爱思考、活力满满、开朗爱笑的年轻人
12-18 1881
Vue中使用stylus全局引入不生效的问题参考 什么意思？ 比如说，我们在 App.vue 里面： <style lang="stylus"> @import "./style/min.styl" </style> min.styl 里面定义了两个变量，我们想象的是，在所有的 .vue 文件中都可以使用 min.styl 中的变量。 但现实的情况是：并没有生效。 难受啊≧ ﹏ ≦ 参考 https://github.com/vuejs/vue-cli/issues/441 htt
【css/vue】Vue组件中对body操作样式的一种解决方案
【敦厚的曹操】的专栏
01-01 2016
Vue组件中对body操作样式的一种解决方案
vue scoped html样式无效
西洲
07-03 7508
1、问题场景 page1,page2都使用flexible移动端自适应的时候，有一个页面page2需要手动设置rem基准值， //手动设置基准 html{ font-size: 120px !important; } 但是在page2引用的self.less里面设置了基准，竟然没有生效 2、问题分析scoped属性 在引用self.less的时候，使用了属性scoped ...
Vue 单独页面设置 body 样式
weixin_44590591的博客
01-07 6870
需求：针对不同的页面， 的样式需要做一些变化。比如不同页面设置不同的背景色，如果直接在页面里设置 body 的样式，页面并不会生效，如下： <template> <div>单独页面</div> </template> <style> body { backgroud-color: #ccc; min-width:400px; } </style> 解决方法 <template> <
vue3中给el-dialog的el-dialog__body设置不上样式
最新发布
12-11
在Vue 3中使用Element Plus库时，如果你发现给`el-dialog`的`el-dialog__body`设置不上样式，可能是由于以下原因： 1. **样式优先级问题**：Element Plus的样式优先级较高，可能覆盖了你的自定义样式。 2. **样式作用域问题**：Vue的单文件组件（SFC）默认使用样式作用域（scoped），这会导致样式只作用于当前组件。 以下是一些解决方法： ### 方法一：使用深度选择器 在Vue 3中，可以使用`::v-deep`选择器来穿透样式作用域，从而影响子组件的样式。 ```vue <template> <el-dialog> <div class="custom-body"> <!-- 你的内容 --> </div> </el-dialog> </template> <style scoped> .custom-body { /* 你的样式 */ } ::v-deep .el-dialog__body { /* 覆盖Element Plus的样式 */ padding: 20px; } </style> ``` ### 方法二：使用全局样式 如果你希望样式在全局范围内生效，可以在全局样式文件中进行覆盖。 ```css /* 在全局样式文件中，例如 main.css */ .el-dialog__body { padding: 20px; } ``` 然后在`main.js`中引入该样式文件： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import '路径/to/main.css'; createApp(App).mount('#app'); ``` ### 方法三：使用内联样式 如果样式不复杂，可以直接使用内联样式： ```vue <template> <el-dialog> <div class="custom-body" style="padding: 20px;"> <!-- 你的内容 --> </div> </el-dialog> </template> ``` ### 方法四：使用自定义类名 通过自定义类名来覆盖默认样式： ```vue <template> <el-dialog> <div class="custom-body"> <!-- 你的内容 --> </div> </el-dialog> </template> <style scoped> .custom-body { padding: 20px; } </style> ``` 然后在`el-dialog`组件中引用该类名： ```vue <el-dialog body-class="custom-body"> <!-- 你的内容 --> </el-dialog> ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值