element ui 级联 下拉 日期组件常规样式修改

实现方法是 如果可以通过深度选择器解决 用深度解决 解决不了用 组件自带的popper-class属性解决

注：部分修改是不能用scoped

一、下拉菜单

注意： 部分样式 不能用scoped

 <el-select popper-class='selectClass' v-model="param.type" placeholder="请选择" style="margin-top:9px;width: 100%;" @change="blurIps(0)">
   <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
   </el-option>
 </el-select>

<style lang="scss" scoped>
/* 下拉框获得焦点时 边框颜色 */
/deep/.el-select .el-input.is-focus .el-input__inner {
  border-color: #7763fa;
}
</style>
<style>
/* 下拉框选中字体颜色 */
.selectClass .el-select-dropdown__item.selected {
  color: #7763fa;
}
</style>

二、 级联菜单

注意： popper-class 属性

 <el-cascader popper-class='cascaderPopper' :options="classOptions" v-model="param.goods_class_id" style="width:100%;margin-top:9px;" @change="blurIps(1)" :props="{ checkStrictly: true, value: 'goodsClassId', label: 'name', children: 'childs' }" clearable></el-cascader>

<style  lang="scss" scoped>
/* 下拉框获得焦点时 边框颜色 */
/deep/ .el-cascader .el-input.is-focus .el-input__inner {
  border-color: #7763fa;
}
</style>
<style>
/* 级联选中项 激活时的字体颜色 */
.cascaderPopper .el-cascader-node.in-active-path,
.el-cascader-node.is-selectable.in-checked-path,
.el-cascader-node.is-active {
  color: #7763fa !important;
}
/*  级联选中项 激活时 单选框的颜色*/
.cascaderPopper .el-radio__input.is-checked .el-radio__inner {
  border-color: #7763fa;
  background: #7763fa;
}
/*  级联选中项 鼠标悬浮时 边框颜色*/
.cascaderPopper .el-radio__inner:hover {
  border-color: #7763fa;
}

</style>

三、 日期选择器

 <el-date-picker popper-class='dateClass' style="margin-top:9px;width: 100%;" @change="blurIps(6)" value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']" type="daterange" v-model="unshelfTime" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
 </el-date-picker>

<style lang="scss" scoped>
//  激活时边框的颜色
/deep/ .el-range-editor.is-active {
  border-color: #7763fa;
}
// 激活时
/deep/ .el-range-editor.is-active:hover {
  border-color: #7763fa;
}
</style>


<style>
/* 日期 选中开始的背景和 字体 */
.dateClass td.start-date span {
  background: #7763fa;
  color: white;
}
/* 日期 选中结束的背景和 字体 */
.dateClass td.end-date span {
  background: #7763fa;
  color: white;
}

/* 日期 鼠标选中开始和结束后  悬浮时的hover 字体效果  */
.dateClass td.start-date span :hover {
  color: white;
}
/* 日期 鼠标选中开始和结束后  悬浮时的hover 字体效果  */
.dateClass td.end-date span :hover {
  color: white;
}
/* 日期  鼠标悬浮时字体效果 */
.dateClass .available :hover {
  color: #7763fa;
}
/* 日期  今天的字体效果 */
.dateClass td.today span {
  color: #7763fa;
}
</style>