Правильное определение области дизайна материалов или стилей начальной загрузки в компонентах Vue

#javascript #css #vue.js #bootstrap-4 #material-design

Вопрос:

Теперь я занимался этим в нескольких проектах, где при использовании компонентной платформы, такой как Vue, которая продвигает стили с областью действия, вы не можете изменять стили дочерних компонентов в библиотеках MD или начальной загрузки Vue (я предполагаю, что это применимо к другим компонентным фреймворкам?).

Это применимо, если вы используете свойство с областью действия:

 <style lang="scss" scoped></style>
 

Чтобы охватить стили, мы всегда должны заключать все стили в родительский идентификатор или класс, чтобы стили случайно не применялись глобально.

 <style lang="scss">
#uniqueId {
  .my-class {
    background-color: red;
  }
}
</style>
 

Есть ли способ обойти это? Я хотел бы использовать атрибут области видимости в теге стиля, чтобы убедиться, что стили не просачиваются в остальную часть приложения.