Komponens stílusának testreszabása a Vue keretrendszerben

A komponensek stílusának testreszabásához a komponens fájljában szükséges egy style taget megírni:

App.vue<script>
  
</script>
<template>
  
</template>
<style>
  
</style>

Ebben a tagben CSS kódot írhatunk, ami csak a komponens HTML kódjára lesz alkalmazva, és nem fog máshol érvényesülni. Ezt kényelem érdekében hozták létre.

Nézzünk egy példát. Tegyük fel, hogy van néhány bekezdésünk:

App.vue<template>
  <p>
    1
  </p>
  <p>
    2
  </p>
</template>

Színezzük pirosra őket:

App.vue<style>
  p {
    color: red;
  }
</style>