How to set default styles in unordered lists in Material-UI React

Question

I'm trying to replicate a simple blog from markdown with Next.js and Material-UI but something is removing the default styles from the unordered lists.

List items ( li HTML elements) have list-style: none; set and have no padding. Ordered lists look normal and have the default styles.

How it looks in the documentation's example:

What I get when I used the same content and markdown handling code:

The problem persists whether I use markdown content or ul / ol / li elements directly in JSX.

In the documentation example, the code that reads markdown and transforms it into React components doesn't seem to change the styling either.

Answer 1

My bad, I had the following fragment of code in a component:

<GlobalStyles styles={{ ul: { margin: 0, padding: 0, listStyle: 'none' } }} />

That was overriding the default styling.

It was in a old component that I didn't need anymore.

Turns out, overriding global styles recklessly can cause headaches.