concepto
Se utiliza principalmente para modificar muchas bibliotecas de componentes de uso común de Vue (Element, Vant, AntDesigin).Aunque el estilo está configurado, aún es necesario cambiar otros estilos, porque se agrega scoped para realizar la modularización de css
Debe usar penetración de estilo para cambiar el estilo del componente
El principio de alcance
El alcance en Vue garantiza la unicidad al agregar una marca única y no repetitiva : data-v-hash a la estructura DOM y al estilo css (y este trabajo se realiza mediante la traducción de PostCSS ), para lograr la privatización del estilo y el Propósito de modularización.
El código de muestra simple es el siguiente
<template>
<div>
<el-input placeholder="Please input" class="ipt" />
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
.ipt {
width: 300px;
margin: 100px 400px;
}
</style>
Resumir las tres reglas de representación de alcance
- Agregue un atributo de datos no repetitivo (como: data-v-123) al nodo DOM de HTML para representar su singularidad
2. Agregue un selector de atributo de datos (como [data-v-123]) del componente actual al final de cada selector CSS (declaración CSS generada compilada) para privatizar el estilo
3. Si el componente contiene otros componentes en su interior, solo se agregará el atributo de datos del componente actual a la etiqueta más externa de otros componentes.
Aviso
<template>
<div>
<el-input placeholder="Please input" class="ipt" />
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="less">
.ipt {
width: 300px;
margin: 100px 400px;
.el-input__inner {
background-color: red;
}
}
</style>
Agregue el estilo correspondiente a los elementos internos. En el estilo, el estilo en realidad se modifica, pero preste atención a la segunda y tercera reglas de representación anteriores.
Porque solo el atributo de datos del componente actual se agregará a la etiqueta más externa de otros componentes
Pero al modificar el estilo se modifica el selector de atributos de datos del componente actual, por lo que no se puede encontrar el componente correspondiente
Modificación de estilo en estilo.
Los componentes reales de la página.
Agregue solo el atributo de datos a la etiqueta más externa
penetración de estilo profundo
Ver 2
Se recomienda usar /deep/ para lograr penetración de estilo en Vue2 , y también puede tener efecto en Vue3, pero habrá advertencias
<template>
<div>
<el-input placeholder="Please input" class="ipt" />
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="less">
.ipt {
width: 300px;
margin: 100px 400px;
// Vue2 推荐使用 /deep/
/deep/ .el-input__inner {
background-color: red;
}
}
</style>
Ver 3
Vue3 recomienda usar : deep() , que es una función, simplemente coloque el nombre de la clase que debe modificarse entre paréntesis
<template>
<div>
<el-input placeholder="Please input" class="ipt" />
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="less">
.ipt {
width: 300px;
margin: 100px 400px;
// Vue3 推荐使用 :deep()
:deep(.el-input__inner) {
background-color: red;
}
}
</style>
Principio de realización
Vue2 y Vue3 implementan el mismo principio de penetración de estilo, todos mueven el atributo de datos del selector a la etiqueta más externa.
Si hay un error en el artículo, pida a todos que hagan preguntas, estaría muy agradecido. Si no entiendes, puedes comentar, y te responderé uno por uno.
Si el artículo es útil para todos, espero que puedan darle un pulgar hacia arriba y alentarlo. Habrá un largo camino por recorrer para trabajar juntos en el futuro, y el camino será largo y difícil.