如何在Material-UI React项目中为无序列表设置默认样式

DevOps 小满

2026-9-25

问题原因

该问题由全局样式规则覆盖原生无序列表默认属性导致，常见触发场景如下：

项目引入的全局CSS（如Next.js的全局样式文件、第三方样式库）包含ul { list-style: none; }的重置规则，其中Tailwind CSS的默认基础样式重置是高频触发原因
Material-UI的CssBaseline组件的自定义样式覆盖规则针对ul做了重置
markdown转换组件渲染时误将原生ul替换为Material-UI自带的List组件，该组件默认会给子元素li设置list-style: none属性

解决方案

方案1：全局统一修复

如果需要所有场景下的原生列表都保留默认样式，可以直接在Material-UI主题配置中添加样式覆盖：

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        ul: {
          listStyle: 'disc',
          paddingLeft: '2rem',
          '& ul': {
            listStyle: 'circle'
          }
        },
        ol: {
          paddingLeft: '2rem'
        }
      }
    }
  }
});

方案2：仅修复markdown区域列表样式

如果不希望影响其他业务组件的列表样式，可以给Markdown渲染区域的外层容器添加自定义类名（如markdown-body），再针对该类添加专属样式：

.markdown-body ul {
  list-style: disc;
  padding-left: 2rem;
}
.markdown-body ul ul {
  list-style: circle;
}
.markdown-body ol {
  padding-left: 2rem;
}