Problemas y soluciones al modificar el estilo autónomo de elementUi no surte efecto

Me he encontrado con el problema de que incluso si se utiliza un selector profundo, el estilo autónomo de elementUi no se puede modificar.

Pensé que se trataba de un error local, pero luego lo encontré nuevamente. Al usar el-select, modificar el estilo de el-select-dropdown no funcionó.

Más tarde, al mirar el elemento, descubrí que el elemento dom renderizado no estaba dentro del elemento #app en absoluto. Resulta que el elemento el-select dentro del menú desplegable el-select se representa fuera de la #aplicación, por lo que no se puede colocar usando el selector de profundidad.

Después de descubrir la causa raíz del problema, cambié el método de búsqueda. Antes, busqué el estilo del componente elementUi pero no encontré una solución adecuada. la modificación del estilo del componente el-select. Bingo, finalmente encontré la publicación de blog correcta, ¡la solución perfecta! Aquí se explica cómo:

Agregue un atributo en el-select: popper-append-to-body="false", que se usa para colocar el elemento renderizado en el elemento #app.

Luego utiliza el selector de profundidad para modificarlo.

Consulte la publicación del blog: /qq_44747461/article/details/106140453

Tampoco puede funcionar correctamente. Puede verificar si es el motivo anterior y luego elegir la palabra clave correcta. solución de búsqueda.

Postdata 1: Lo anterior es una modificación del estilo el-select. A veces te encuentras con situaciones en las que otros estilos de componentes no tienen efecto. Analiza y resuelve el problema de la siguiente manera, y podrás manejarlo perfectamente.