如何缩小JoyUI List列表项间距？主题设置无效求解决方案

你之前设置全局spacing的方式不会直接作用于列表项间距，因为MUI Joy的List组件项间距由自身样式规则控制，而非全局spacing变量直接覆盖。可以通过以下两种方式调整：

方法一：在主题中全局自定义List样式 #

扩展主题时针对JoyList组件的item样式做覆盖，所有List都会生效：

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

const theme = extendTheme({
  fontFamily: {
    body: "'Public Sans', var(--joy-fontFamily-fallback)",
  },
  components: {
    JoyList: {
      styleOverrides: {
        item: {
          // 用主题间距变量缩小上下内边距，0.5对应spacing的一半
          paddingBlock: "var(--joy-space-05)",
          // 也可以直接写固定值，比如"4px"
          // paddingBlock: "4px",
        },
      },
    },
  },
});

export default theme;

方法二：针对单个List组件自定义样式 #

如果只想调整某一个列表的间距，直接在组件上用sx属性修改：

import List from '@mui/joy/List';
import ListItem from '@mui/joy/ListItem';

// 使用时给List添加自定义样式
<List sx={{ '& .MuiListItem-root': { py: 0.5 } }}>
  <ListItem>你的列表项内容</ListItem>
  <ListItem>你的列表项内容</ListItem>
</List>

说明：py是paddingTop和paddingBottom的简写，0.5对应主题spacing单位的一半，你可以根据需求调整数值（比如1对应默认spacing，0.25间距更小）。

内容的提问来源于stack exchange，提问作者Nick Hodges