Ignore styles from outside the component-CodePudding

I use my Vue component inside an existing page with some global styles for input elements. Now I don't want them to affect the elements inside the component. How would I achieve the component ignoring stylesheats not included in the main.js file or included in the respective component?

CodePudding user response：

In your single file component you can add scoped keyword.

<template>
  <div >test</div>
</template>

<style scoped>
.has-red-color {
  color: red !important;
}
</style>

Scoped keyword just use this style when you add this component.