Ignore styles from outside the component

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?

>Solution :

In your single file component you can add scoped keyword.

<template>
  <div class="has-red-color">test</div>
</template>

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

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