CODEWITHSUNDEEP
javascripthtmlcssvue.jsnode-modules
Sponge Coder
Sponge Coder

Reputation: 71

How to changing a style in node_modules in its own vue <style> tags

I want to make changes to the css file inside the multiselect package. But I don't want to change it from within node_modules, all I want is to write it between style tags of my page that I created with vue. I want to change the white-space property But I can't see any change when I write as below. Can you help with this?

Default.css (Node_modules)

.multiselect-tag {
    align-items: center;
    background: var(--ms-tag-bg,#10b981);
    border-radius: var(--ms-tag-radius,4px);
    color: var(--ms-tag-color,#fff);
    white-space: nowrap;
}

My template

<template>
  <div class="filters">
    <Multiselect
      class="multiselect"
      v-model="value"
      mode="tags"
      placeholder="Customer"
      :close-on-select="false"
      :filter-results="false"
    />
  </div>
</template>

My CSS code

<style scoped>  
.multiselect {
  --ms-tag-bg: #dbeafe;
  --ms-tag-color: #2563eb;
  --ms-radius: 0.475rem;
  --ms-dropdown-radius: 0.475rem;
  --ms-spinner-color: #2563eb;
  --ms-tag-ml: 0.85rem;
}
.multiselect,
.multiselect-tag {
  white-space: normal !important;
}
</style>

Upvotes: 0

Views: 504

Answers (2)

Gabe
Gabe

Reputation: 2626

I think you need to remove the scoped from your <style scoped> style tag, as this will let the styles only apply for the current component (and the root node of the child). But you want to style an element the Multiselect component.

<style>  
.multiselect {
  --ms-tag-bg: #dbeafe;
  --ms-tag-color: #2563eb;
  --ms-radius: 0.475rem;
  --ms-dropdown-radius: 0.475rem;
  --ms-spinner-color: #2563eb;
  --ms-tag-ml: 0.85rem;
}
.multiselect,
.multiselect-tag {
  white-space: normal !important;
}
</style>

Beware that removing the scoped will make the styles apply globally, so all Multiselect instances will be affected. If this is not what you need, you might try to use deep selectors.

See vue style docs.

Hope this helps.

Upvotes: 1

foreverandthreedays
foreverandthreedays

Reputation: 101

So if I have got you right, you want to change / overwrite your default CSS from your stylesheet with new values in your hmtl.

To do this, simply insert "style" within your tag.

For example:

<Multiselect class="multiselect" style="color: black;"/>

Upvotes: 0

Related Questions