vue或avue中怎样修改已有的css样式

迪尔~

已于 2023-02-13 22:28:34 修改

阅读量1.7k

点赞数

分类专栏： vue 文章标签： css vue.js 前端

于 2023-02-09 15:15:17 首次发布

本文链接：https://blog.csdn.net/weixin_44384605/article/details/128953033

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在Vue或Avue框架中，可以通过F12开发者工具定位到需要修改的CSS样式，然后在组件的scoped样式中使用::v-deep穿透作用域，添加相应的样式规则，如改变背景色、字体色和边框，并用!important确保优先级。例如，修改表格头部样式为特定背景和文字颜色，并实现文字居中。

摘要由CSDN通过智能技术生成

vue或avue中怎样修改已有的css样式
1.通过F12或者在网页右击选中检测，找到自己想要更改的css样式标签，可以通过在网页临时更改样式来确定是否是你要改的标签，如下图（更改区域默认为白色）
在这里插入图片描述
2.找到后在在vue中加入，将你要改的css样式放在里面，记得在css样式前加入::v-deep，否则不会生效

<style lang="scss" scoped>
::v-deep .el-table th {
//背景颜色，最好在后面加入!important
  background: rgb(5, 26, 131) !important;
  //字体颜色
  color: #fff;
  //边框颜色
  border: 1px solid rgb(5, 26, 131) !important;
  //文字居中
  text-align: center !important;
}
</style>