How do I decrease the spacing between bullets in a JoyUI List?

Question

I have some lists on this page:

https://www.nickhodges.com/FavoriteStuff

but I want the spacing between the bullets to be smaller. I can't figure out the right way to do that using theming. I've tried this:

import { extendTheme } from "@mui/joy/styles";

const theme = extendTheme({
  fontFamily: {
    body: "'Public Sans', var(--joy-fontFamily-fallback)",
  },
  spacing: 1;
});

export default theme;

but that seems to have no effect.

Answer 1

There are multiple ways to reduce the spacing:

1. Set <List size="sm"> (the font-size will all also reduce)

2. Set CSS variable --ListItem-minHeight using the sx prop on the List component:

   <List sx={{
     '--ListItem-minHeight': '36px',
   }}>
   

See the preview here: https://codesandbox.io/s/sweet-rgb-86h52q?file=/Demo.js