Vue · Middle · Question 45 of 75

How do you style an element inside a child component from a scoped style?

.form :deep(.input) { border-color: red; }

✓Correct answer: With the :deep() pseudo-class
2Scoped styles can't affect children; remove scoped from all components
3With !important

Explanation

:deep() removes the data attribute from the inner selector. Use it sparingly - it couples the parent to the child's internal markup.

Further reading

Vue API: SFC CSS Features ↗

Test yourself

Take the Vue · Middle quiz: questions and options are shuffled, and you get a review of your mistakes at the end.