mirror of
https://github.com/tenrok/vue-select.git
synced 2026-05-17 02:29:37 +03:00
Jeff Sagal
38 lines
1.5 KiB
Markdown
38 lines
1.5 KiB
Markdown
Vue Select offers many APIs for customizing the look and feel from the component. You can use
|
||
[scoped slots](../api/slots.md), [custom child components](components.md), or modify the built in
|
||
SCSS variables.
|
||
|
||
::: tip
|
||
Support for CSS variables (custom properties) is currently on the road map for those
|
||
that are not using sass in their projects.
|
||
:::
|
||
|
||
## SCSS Variables
|
||
|
||
Variables are leveraged in as much of the component styles as possible. If you really want to dig
|
||
into the SCSS, the files are located in `src/scss`. The variables listed below can be found at
|
||
[`src/scss/global/_variables`](https://github.com/sagalbot/vue-select/blob/master/src/scss/global/_variables.scss).
|
||
|
||
All variables are implemented with `!default` in order to make them easier to override in your
|
||
application.
|
||
|
||
<<< @/../src/scss/global/_variables.scss
|
||
|
||
## Overriding Default Styles
|
||
|
||
Vue Select takes the approach of using selectors with a single level of specificity, while using
|
||
classes that are very specific to Vue Select to avoid collisions with your app.
|
||
|
||
All classes within Vue Select use the `vs__` prefix, and selectors are generally a single classname
|
||
– unless there is a state being applied to the component.
|
||
|
||
In order to override a default property in your app, you should add one level of specificity.
|
||
The easiest way to do this, is to add `.v-select` before the `vs__*` selector if you want to adjust
|
||
all instances of Vue Select, or add your own classname if you just want to affect one.
|
||
|
||
<CssSpecificity />
|
||
|
||
<<< @/.vuepress/components/CssSpecificity.vue
|
||
|
||
|