问题

在使用element-ui等第三方组件时，有时候想要修改组件内的样式，但不成功

解决方案

第一种

-【方案一】加上一个非scoped样式
根据文档可知，vue可以混用本地和全局样式，因此对子组件的非根元素样式修改，可以单独放在一个非 scoped 样式中

<style>
 .el-button span{
    background:red;
  }
</style>

<style scoped>
/* 本地样式 */
</style>
  • 第二种
    【方案二】采用/deep/
    加上/deep/，组件的样式可以渗透到子组件相应的元素上
<style lang="less" scoped>
.test{
  /deep/ .el-button span{
    background:red;
  }
}
</style>
# vue.js # javascript # 前端
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue