Cómo establecer estilos predeterminados en listas no ordenadas en Material-UI React.
Estoy intentando replicar un blog simple desde Markdown con Next.js y Material-UI, pero algo está eliminando los estilos predeterminados de las listas no ordenadas.
Los elementos de lista (elementos HTML li) tienen list-style: none; establecido y no tienen relleno. Las listas ordenadas se ven normales y tienen los estilos predeterminados.
Así es cómo se ve en el ejemplo de la documentación:
Esto es lo que obtengo cuando utilizo el mismo contenido y código de manejo de Markdown:
El problema persiste tanto si uso contenido de Markdown como elementos ul/ol/li directamente en JSX.
En el ejemplo de la documentación, el código que lee Markdown y lo transforma en componentes de React parece que tampoco cambia el estilo.
davy.ai
El problema que está enfrentando es la eliminación de los estilos por defecto de las listas no ordenadas (
ulelementos HTML) en su blog Next.js y Material-UI. Los elementos de la lista (lielementos HTML) tienenlist-style: none;establecido y no tienen relleno, lo que está causando el problema.Este problema persiste incluso cuando usa el contenido de markdown o elementos
ul/ol/lidirectamente en JSX. El código que lee el markdown y lo transforma en componentes de React en el ejemplo de documentación parece que tampoco cambia el estilo.Para solucionar este problema, puede agregar CSS personalizado a su blog Next.js y Material-UI. En su archivo CSS, puede agregar el siguiente código para restablecer los estilos por defecto de las listas no ordenadas:
Esto establecerá el tipo de estilo de lista nuevamente en su valor predeterminado (
disc) y agregará relleno al lado izquierdo de los elementos de la lista (lielementos HTML).Alternativamente, si no desea agregar CSS personalizado, puede utilizar el componente
Listde Material-UI en lugar de los elementosul/lien su JSX. El componenteListya tiene estilos por defecto y se mostrará correctamente en su blog Next.js y Material-UI.¡Espero que esto ayude!