When working on the Vite-Vue application, I noticed that the styles I implemented for both index.html and Vue components/views are showing up as crossed out in the browser. Additionally, many of the styles I added to the components/views are also being crossed out. https://i.stack.imgur.com/9O7TH.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
<style>
body {
min-height: auto;
color: black;
background: white;
transition: none;
line-height: normal;
font-family: 'Arial', sans-serif;
font-size: 16px;
text-rendering: auto;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
Is there a way to remove these unwanted styles and prevent my styles from being modified in the Vite-Vue app?