element-ui样式覆盖

思路一:直接写style样式在组件标签上
思路二:写在style标签内,去掉scoped,写在app.vue中,el-tooltip改变border颜色
思路三:设置包裹元素样式,比如el-tooltip,设置slot元素的宽度即可改变tooltip的宽度
思路四:::v-deep,/deep/,:deep等
思路五:important
.wrap >>> .item {}
竖向滚动条颜色

/deep/.el-scrollbar__bar.is-vertical > div {
  background-color: #575f7b;
}
或者
::v-deep .el-button

输入框

.el-input__inner {
  border-radius: 0 !important;
}

按钮

.el-button {
  border: none !important;
}

下拉框

      .el-select {
        width: 80px;
        color: #fff;
        /deep/ .el-input__inner {
          background: rgba(0, 0, 0, 0);
          border: none;
          color: #fff;
          height: 60px;
          padding: 0;
        }
      }

菜单样式

    .el-aside {
      background-color: #616b88;
      color: #333;
      text-align: center;
      transition: width 0s ease;
      // 箭头颜色
      .el-menu-vertical-demo .el-submenu__title i {
        color: #fff;
      }
      /deep/ .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
        border-bottom: none;
      }

你可能感兴趣的:(element-ui样式覆盖)