Vue 改变Element组件Cascader级联选择器样式

需求: 因为级联下拉框的层级太多, 想给它加个超出宽度后, 水平滚动的效果

看到Element文档中级联属性有一个描述, 给Casscader加class名

 加上后代码如下:

        <el-cascader
          v-model="form.value"
          :options="options"
          :props="defaultProps"
          popper-class="train-tree"
          >
          </el-cascader>

开始尝试在本页面写css样式覆盖, css如下, 发现没有生效.

  .train-tree{
    max-width: 850px !important;
    overflow: scroll !important;
  }

然后打开浏览器看到, 级联选择器不在app中, 那么该样式就不能写在声明scoped的style中了

然后尝试创建一个新的style, 将自定义的这块css代码放进去. 生效了

<style>
.train-tree{
  max-width: 850px !important;
  overflow: scroll !important;
}
</style>