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

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 >
    <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>

CodePudding user response：

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.

CodePudding user response：

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  style="color: black;"/>