El problema y la solución de modificar el estilo del componente que viene con elementUi no son efectivos.
Pensé que era un error nativo. Luego me encontré nuevamente con que al usar el-select, modificar el estilo de el-select-dropdown no funcionó.
Cuando revisé el elemento más tarde, descubrí que el elemento dom renderizado no estaba dentro del elemento #app en absoluto. Resulta que el elemento desplegable el-select en el-select se separará de #app después de renderizar. Por lo tanto, no puede utilizar selectores de profundidad para localizar elementos.
Después de encontrar el origen del problema, cambiamos nuestro método de búsqueda. Anteriormente, buscamos el problema de los efectos de estilo deficientes del componente elementUi, pero no encontramos una solución adecuada. Ahora buscamos la modificación del estilo del componente el-select. Bingo, finalmente encontré la publicación de blog correcta, ¡la solución perfecta! El método es el siguiente:
Agregue un atributo en el-select: popper-append-to-body="false", que se usa para colocar el elemento renderizado en el elemento #app.
Luego modifícalo usando el selector de profundidad.
Entrada de blog de referencia:/QQ_44747461/article/details/106140453.
Si no funciona, puedes ver si se debe a los motivos anteriores y luego elegir un plan de búsqueda de palabras clave adecuado.
Posdata 1: Lo anterior es el método de modificación del estilo el-select. A veces, otros estilos de componentes no funcionan. Después del análisis y la solución, se puede procesar perfectamente:
Will (nombre masculino)
(No se recomienda el selector de profundidad /deep/ porque solo se aplica a los navegadores Chrome. Hay Problemas de compatibilidad del servidor. )
Posdata 2: Método para modificar el estilo desplegable de el:
Agregue el nombre de la clase al menú desplegable de El y luego
Posdata 3: Modificar el estilo del selector de fecha:
Agregar popper-class y establecer un nuevo estilo, como por ejemplo: popper-class="date-style".