Как правильно переписывать стандарные стили компонентов?

Question

[Ваня]

Допустим у нас есть любой компонент, допустим новости.

<template>
    <div class="news">
       <h1>{{ title }}</h1>
       <div class="text">
           <p>{{ text }}</p>
       </div>
    </div>
</template>

<style scoped lang="scss">
.news{}
.text p{}
</style>

Я хочу чтобы на некой странице стандартные стили были переписаны. Например мы используем компонент новости и задаем новые стили.

<template>
    <news />
</template>

<style scoped lang="scss">
.new-news{}
.new-text p{}
...
</style>

Вопрос, как это правильно сделать? Какие есть подходы, я не понимаю. Или чтобы лучше понять задачу, представьте компонент не новости, а инпута UI, и на определенной страницы компонент инпута должен иметь другие стили

Answer 1

[LJ322]

Самое простое это комбинировать scoped и deep - sfc-css-features