@riophae/vue-treeselect 样式修改

### 如何修改 `@riophae/vue-treeselect` 组件样式 #### 使用全局 CSS 覆盖默认样式为了覆盖 `@riophae/vue-treeselect` 默认样式，可以在项目的全局样式文件中添加特定的选择器来重写组件的样式。由于该组件使用了 scoped 样式，默认情况下不会被外部样式影响。 ```css /* global.css */ .vue-treeselect__control { background-color: #f0f0f0; } .vue-treeselect__input { color: blue; } ``` 这种方式适用于简单的样式调整[^1]。 #### 利用插件提供的 API 进行配置除了通过 CSS 修改外观外，还可以利用 `@riophae/vue-treeselect` 提供的属性来自定义某些视觉效果： - `normal-class`: 定义正常状态下的类名 - `disabled-class`: 设置禁用状态下应用的额外类名 - `open-class`: 当下拉菜单展开时使用的类名这些属性允许开发者更灵活地控制不同交互状态的表现形式[^2]。 #### 创建自定义主题对于更加复杂的定制需求，官方建议创建一个新的 SCSS 文件作为自定义主题的基础，在其中导入并覆写原始变量值： ```scss // custom-theme.scss $vue-treeselect-primary-color: #ff7c80 !default; @import "~@riophae/vue-treeselect/dist/scss/vue-treeselect"; ``` 之后只需确保此 SCSS 文件编译后的 CSS 正确引入到项目中即可生效[^3]。 #### HTML 结构中的内联样式或局部作用域样式如果仅需针对单个实例做特殊处理，则可以直接在模板里设置 inline style 或者借助 `<style scoped>` 来实现局部范围内的样式变更[^4]: ```html <template> <Treeselect :options="options" v-bind="$attrs" class="customized-tree-select">  </Treeselect> </template> <style scoped lang="less"> .customized-tree-select .vue-treeselect__single-value { font-weight: bold; } </style> ```

阅读全文