CODEWITHSUNDEEP
cssvue.js
Amos
Amos

Reputation: 1351

css is being ignored by browser and devtools

Using both Chrome and Firefox, for some reason a certain css is being ignored. Also in devtools it is not shown as a css rule.

The following is shown with the relevant color, with or without the .e-rowcell prefix. Also, when inspecting this element in dev tools -> styles, I see the relevant css style from my file.

.e-rowcell.received {
    color: #66DA26 !important;
  }

<div data-v-72a15e66="" class="e-rowcell received">blah blah</div>

The following is shown with an incorrect color, for the same css above. This is located inside a cell of a table/grid. When inspecting this element in dev tools, I don't see it in the list.

<td class="e-rowcell received" role="gridcell" tabindex="-1" aria-label="$16.24 column header Feb" aria-colindex="2" index="7" style="text-align: center;">$16.24</td>

I know it's not much information but I don't know why it happens in order to add more relevant data. Let me know what to look for and I'll add more info.

In other words, why would a browser ignore classB in the following code class="classA classB" even though classB is defined properly? Thanks

Upvotes: 0

Views: 221

Answers (1)

arieljuod
arieljuod

Reputation: 15838

when you use the scoped attribute on the style of a component, the generated css rules also references the data-v attribute value and can cause problems if you have css that you want to apply for children of a component

you can remove the scoped attribute or move the styles to the child component if possible

Upvotes: 1

Related Questions