Uno, la razón
Cuando usamos la interfaz de usuario del elemento o componentes comunes personalizados, a veces necesitamos modificar el estilo del componente secundario en el componente principal. Es fácil encontrar tal situación. La modificación del estilo del componente secundario en el componente principal no tiene efecto. ?
La razón es que generalmente agregamos alcance al estilo de la página vue para asegurarnos de que el estilo de este componente vue solo actúa sobre este componente y no afecta a otros componentes. El principio de alcance se explica en este blog muy claramente.
https://blog.csdn.net/qq_41800366/article/details/107062781
que es:
vue 给该组件的每一个标签自动添加一个唯一的 attribute, 这里 注意,你会发现vue给子组件的根标签也打上了这一个唯一的attribute， 但是子组件的其他标签却没有打上。
编译后会发现，添加的css样式变成了如下：添加了唯一的标签，这也就是vue scoped 实现样式隔离的原理
En segundo lugar, la solución oficial
¿Cómo cambiar el estilo del componente secundario en el componente principal?
El método oficial es la penetración de estilo, su principio es agregar el atributo único del componente a la estructura html bajo el nivel correspondiente en el componente padre, cubriendo así el estilo original del componente hijo.
En cuanto a la escritura de penetración de estilo, está disponible en Internet, como >>> o :: v-deep o / deep /, todos son fáciles de encontrar, así que no diré más.
Por ejemplo, suponga que esta etiqueta p está en un subcomponente.
<style scoped>
/deep/p{
color: deepskyblue;
}
</style>
Escriba así en el componente principal, ¡puede sobrescribir su estilo!
Está compilado así:
[data-v-7ba5bd90] p {
color: deepskyblue;
}
Tres, otra solución
Agregamos un alcance para asegurarnos de que el estilo de este componente no afecte a todo el mundo, limitándolo así. Luego, siempre que definamos el estilo globalmente, podemos modificar el estilo correspondiente en cualquier componente. Por lo tanto, solemos decir que modificar el elemento globalmente. Es por eso que el estilo de interfaz de usuario puede tener efecto.
Por supuesto, ahora queremos modificar el estilo del componente secundario en el componente principal, luego podemos escribir otro bloque de estilo en el componente principal, sin ámbito, entonces este estilo es global y no hay diferencia con la definición global, pero escribe No es más que el estilo del componente.
Por ejemplo, en la imagen de arriba, 1 es un estilo que solo funciona en esta página y 2 es un efecto global, y cualquier componente funcionará (siempre que el estilo no se anule)
Cuarto, la mejor solución
El tercer método tiene una deficiencia. Sin estilo con alcance, es global y contaminará otras páginas. Por ejemplo, si otra página también usa este componente el-dialog, su color de fondo de estilo también se volverá rojo.
Y dado que escribimos este estilo en este archivo de componente, definitivamente esperamos que solo surta efecto en este componente (el subcomponente de la página que contiene el componente) sin contaminar otros estilos globales.
Esto requiere entender un concepto. A menudo decimos que la estructura dom es una estructura de árbol. De hecho, css también es una estructura. Es interdependiente con la estructura html correspondiente, que es similar a una relación de mapeo.
Aquí, siempre que agreguemos un nombre de clase personalizado al elemento ancestro donde queramos, y luego escribamos el estilo global, entonces este estilo se limitará a la estructura correspondiente bajo este nombre de clase para que surta efecto. Es decir, aunque es ¡Un estilo global, el alcance efectivo se puede controlar artificialmente!
Por ejemplo, aquí:
es decir, en este momento, es un estilo global, pero solo el diálogo debajo de la rama del árbol dom con el nombre de clase fileImport tendrá efecto, y otras páginas no tendrán efecto, porque otras páginas no tienen una estructura dom con el nombre de clase fileImport! ¡Así que es privado, global y personalizable! Si desea utilizar otras páginas, agregue una clase llamada fileImport al elemento ancestro.
¡Soy tan ingenioso! ! !
5. Casos encontrados por particulares
He configurado el estilo de diálogo global. Debido a que otras páginas tienen títulos aquí, las configuré para que proporcionen un icono pequeño como un logotipo, pero este cuadro de diálogo no tiene título, por lo que debo eliminar el anterior, uno al principio, Establecí directamente el contenido de before en none en el estilo con alcance, pero no tiene efecto de todos modos. Luego, considerando que en realidad es un subcomponente de la página, se debe agregar una penetración de estilo, pero aún así no tiene efecto. ., No lo entendí aquí. Aunque se define globalmente, es razonable que mientras use la penetración de estilo, el subcomponente también tenga el atributo de alcance correspondiente, y luego establezca el estilo, siempre que el estilo está satisfecho de que el peso de CSS es más importante que la configuración global, está bien. El estilo de sobrescritura es correcto (o el peso es el mismo, pero el estilo escrito más tarde puede sobrescribir el anterior), no tiene sentido que no surta efecto.
La solución final es usar la cuarta solución, dos estilos, el peso no se consideró al principio, pero aún no surtió efecto, y luego noté que el estilo global es de tres clases más una pseudoclase, peso 40, escribo aquí al menos peso 40 Para que surta efecto. (Debido a que el public.css global está en el archivo main.css, es el más efectivo y el CSS de la página se representa después de él, por lo que si el peso es el mismo, la página anulará el global).
Así que estaba escrito así:
Finalmente entró en vigor:
Sexto, el avance del quinto caso
En cuanto a la razón por la cual la penetración de estilo en el No. 5 no surte efecto, también estoy muy sorprendido ¿No puedo encontrar la razón porque mi penetración de estilo no es correcta? ? ? ? ?
Miré la estructura dom y no tuvo efecto: la
primera capa data-v-48cac322 tiene un alcance, la
segunda capa es data-v-751c36f6 y el punto de división es el nodo de elemento cuya clase es fileImport. Es un nodo combinado de los dos componentes y tiene el atributo de datos asignado por el alcance de los dos componentes al mismo tiempo.
La tercera capa es el componente de diálogo, que es el componente de elemento. Lo que me hace preguntarme es que a partir de aquí, este componente de diálogo no utiliza la escritura con alcance de vue. ? ? ?
Por lo tanto, no hay ningún atributo de datos asignado por ámbito; de lo contrario, el nodo el-dialog__wrapper, como la unión de dos componentes, también debería tener dos atributos. ! !
La razón por la que digo que mi penetración de estilo no surte efecto es porque una vez que la penetración de estilo surta efecto, data-v-751c36f6 se pasará al componente de diálogo, ¡y el nodo html correspondiente también debería tener este atributo de datos! ! !
Estoy estupefacto, no lloré ~~, es demasiado tarde, me voy a dormir.