How can I integrate Picco CSS with React while ensuring the same styles are applied when using the className attribute in React components?

Question

<nav> <ul> <li><a href="#" class="secondary">...</a></li> </ul> <ul> <li><strong>Acme Corp</strong></li> </ul> <ul> <li><a href="#" class="secondary">...</a></li> </ul> </nav> 

I'm struggling to have Picco CSS recognize the className attribute the same as class (the class attribute needs to be className in react).

https://picocss.com/docs/nav

I set up a new Vite project with react and typescript.

How can I fix this?

I tried doing various things with my vite config and setting a custom scss file.