elment自定义样式(scss)

// cover some element-ui styles

.el-breadcrumb__inner,
.el-breadcrumb__inner a {
  font-weight: 400 !important;
}

.el-upload {
  input[type="file"] {
    display: none !important;
  }
}

.el-upload__input {
  display: none;
}

// to fixed https://github.com/ElemeFE/element/issues/2461
.el-dialog {
  transform: none;
  left: 0;
  position: relative;
  margin: 0 auto;
}

// refine element ui upload
.upload-container {
  .el-upload {
    width: 100%;

    .el-upload-dragger {
      width: 100%;
      height: 200px;
    }
  }
}

// dropdown
.el-dropdown-menu {
  a {
    display: block;
  }
}

// to fix el-date-picker css style
.el-range-separator {
  box-sizing: content-box;
}

// element多选框颜色调整
.el-checkbox-color .el-checkbox__input.is-checked .el-checkbox__inner {
  background: #2e55ed;
  border: 1px solid #2e55ed;
  color: white;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #2e55ed;
}
// 按钮下的span
.el-text-color span {
  color: #2e55ed;
}
// 删除按钮下的span
.el-text-color-del span {
  color: #f3222f;
}
// 按钮
.el-button-color.el-button.el-button--default.el-button--small {
  background: #2e55ed;
  border: 1px solid #2e55ed;
  color: white;
}

.el-radio-color .el-radio__input.is-checked .el-radio__inner {
  background: #2e55ed;
  border: 1px solid #2e55ed;
  color: rgb(27, 25, 25);
}

.el-radio-color .is-active .el-radio-button__inner {
  background: #2e55ed;
  border-color: #2e55ed;
}

.el-radio-color .el-radio.is-checked .el-radio__label {
  color: #2e55ed;
}

.el-radio {
  margin-right: 10px;
}

.el-form-item__label {
  color: #979a9f;
  font-weight: 500;
}

.el-form-item {
  margin-bottom: 18px;
}

.el-select {
  width: 100%;
}
// 下拉选中
.el-select-dropdown__item.selected {
  color: #2e55ed;
}
// 刷新按钮
.el-button.is-plain:focus,
.el-button.is-plain:hover {
  color: #2e55ed;
  border: 1px solid #2e55ed;
}
// 分页选中
.el-pager li.active {
  color: #2e55ed;
}

.el-message-box
  .el-button.el-button--default.el-button--small.el-button--primary {
  background: #2e55ed;
  border: 1px solid #2e55ed;
  color: white;
}
.el-button--primary {
  background: #2e55ed;
  border: 1px solid #2e55ed;
  color: white;
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background: #2e55ed;
  border: 1px solid #2e55ed;
  color: white;
}
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
  background: #2e55ed;
  border: 1px solid #2e55ed;
  color: white;
}
.el-dialog__header {
  border-bottom: 1px solid #dadee6;
}
.el-message {
  top: 5vh !important;
}
.el-radio__input.is-checked .el-radio__inner {
  border-color: #2e55ed;
  background: #2e55ed;
}
.el-radio__input.is-checked + .el-radio__label {
  color: #2e55ed;
}

Element-UI是一个流行的Vue.js组件库,它采用预打包的CSS样式。然而,如果你想直接在Scss层面上定制Element-UI的样式,可以利用scss的嵌套规则和变量覆盖功能。 1. **基础路径导入**:首先,你需要将Element-UI的样式文件引入到项目中,通常是`element-ui/packages/theme-chalk/index.scss`。然后,在你的项目的`sass`目录下创建一个`_custom.scss` 或者自定义名称的文件,接着通过`@import`将其导入: ```scss // _custom.scss @import '~element-ui/packages/theme-chalk/index.scss'; ``` 2. **修改变量**:Element-UI有许多可配置的全局变量(如颜色、字体大小等),你可以通过修改这些变量来改变默认样式。例如,要改变主标题的颜色: ```scss $el-icon-color: red; // 将颜色更改为红色 ``` 3. **添加/覆盖样式**:如果你需要自定义组件的某个特定部分,可以在当前文件里选择对应的组件并添加或覆盖其样式。比如,想修改`el-button`的边框颜色: ```scss .el-button { border-color: currentColor; // 更改边框颜色 } ``` 4. **使用 Mixins 和 Mixins 的 Nesting**:如果想复用某些样式,可以创建Mixins并在需要的地方应用它们。 5. **编译SCSS**:最后,使用像`Node-Sass`或`Dart-Sass`这样的工具编译SCSSCSS,并链接到你的HTML文件中。 注意:尽管可以这样做,但不建议大幅度地修改Element-UI的核心样式,因为这可能会导致升级库版本时出现问题。最好是针对你的项目需求对样式做最小化调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值