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

0
votes

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.

1
vue.jsvuetify.js
Please post some sample code where the issue can be reproduced - user700284
Add custom css class to control the color if text - chans
In every vue project, if I add "import vuetify from './plugins/vuetify'", the selection color is changed to black like above images. - Raymond
Your codepen link is not working - chans
Can't you open the link? I checked the link again. I can open it. ??? - Raymond

1 Answers

1
votes

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