-
Notifications
You must be signed in to change notification settings - Fork 138
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Allow completely user-specified CSS #110
Comments
While it's possible to override the default styling by adding I'd like to see I believe the easiest way to allow this is to drop the .container .vue-tags-input .ti-tag {
background-color: indigo;
} would override the default Another option would be to not include the css in the Lastly, another option would be to extract the template html into its own file, allowing you to import what you need (ref). |
Hi, I changed the colors directly in the vue-tags-socket.scss file inside the node-modules folder, but still the background color did not change and kept the default colors |
I needed to override |
You just have to make the selector more specific, no need to use !important-s. For e.g:
This will be specific enough to set 100% as a max width so basically wrap the whole thing in div with the class |
@ilyen85 is correct. I went through all of my styles and added the data attribute to each of the classnames to match the specificity of the native styles and was successfully able to override any styles I wanted. Here are some examples of the selectors I used:
My final product: |
Is there a way to prevent loading the standard vue-tags-input css, so that we can specify exactly how we want to style tags? Alternately, maybe we could get a slot for the tag wrapper (
<li>
) itself?The text was updated successfully, but these errors were encountered: