CODEWITHSUNDEEP
vue.jsvuetify.js
Raymond
Raymond

Reputation: 505

When I import vuetify.js to my Vue project, text selection color is changed black

I'm using red color text in my Vue project. If I don't import vuetify.js, when I select the text, the text color doesn't change. But I import vuetify.js, the selection text color changed black from red. How can I don't change the selection text color even I import(use) vuetify.

When No vuetify css No vuetify

Codepen

When Import vuetify css Import vuetify

Codepen

I'm using HTML editor(tiptap) in my vue project. But vuetify css changed the global style of my project. It make me embarrassed. When I change text color with selecting text, I don't know whether the color is changed or not. Because the selection color is always black.

How can I ignore some vuetify css in some components or Divs.

Upvotes: 0

Views: 533

Answers (1)

skribe
skribe

Reputation: 3615

Text selection color is controlled by the sudo class ::selection. Vuetify has two declarations in its main css file. 

::-moz-selection {
   background-color: #b3d4fc; /* Required when declaring ::selection */
   color: #000;
   text-shadow: none;
}
::selection {
   background-color: #b3d4fc; /* Required when declaring ::selection */
   color: #000;
   text-shadow: none;
}

You should set up a custom styles css or scss that has precedence over the the vuetify.css that overides these styles how you want.

Or rather than overriding the selection properties with other colors you can also simply unset them.

::selection {
   background-color: #b3d4fc; /* Required when declaring ::selection */
   color: unset;
   text-shadow: none;
}

Upvotes: 1

Related Questions