Why are classes getting stripped from <ul> tags in Docusaurus?

Question

When I use unordered lists in Docusaurus Markdown files, the classes are removed from the HTML in the final output.

I enter an unordered list into a Markdown file as HTML, eg:

<ul class="custom">
      <li>
            <a href="#">Item 1</a>
      </li>
      <li>
            <a href="#">Item 2</a>
      </li>
      <li>
            <a href="#">Item 3</a>
      </li>
</ul>

But the list that is output on the website that Docusaurus generates has the classes stripped. So, for example, the inspector shows:

<ul class="">
      <li>
            <a href="#">Item 1</a>
      </li>
      <li>
            <a href="#">Item 2</a>
      </li>
      <li>
            <a href="#">Item 3</a>
      </li>
</ul>

It doesn't do this with <ol> ordered lists, or any other HTML tag that I've noticed. It also doesn't do it with other attributes on the <ul> , so things like id will come through fine.

What might be causing this behavior for unordered lists, is there a fix or way to work around it?

Answer 1

If you open the console of the browser when you are visiting your test page, you might see the error message Warning: Invalid DOM property class . Did you mean . Did you mean className ? , which is pretty clear.

Try className="custom" . Docusaurus renders all inline HTML as JSX code. So you need to do it in the JSX way.