I've now dealt with this on multiple projects where when using a componentized framework like Vue that promotes scoped styles, you cannot change the styles of child components in the MD or Bootstrap Vue libraries (I'm assuming this would apply to other component frameworks?).

This applies if you are using the scoped property:

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

In order to scope the styles we always have to wrap all of the styles in a parent id or class so that the styles don't accidently apply globally.

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

Is there a way around this? I'd like to use the scoped attribute on the style tag to ensure that no styles leak to the rest of the application.