如何修改react-admin侧边栏菜单的字体颜色？

方案一：通过自定义MUI主题精准覆盖 #

React-Admin的侧边栏菜单文本颜色默认继承MUI主题的text.primary，也可以通过主题的components字段直接覆盖RaSidebarMenuItem的样式。修改你的主题配置如下：

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

export const myTheme = createTheme({
  palette: {
    background: {
      default: `#263238`,
    },
    text: {
      primary: `#81C784`, // 修改全局文本主色，直接影响侧边栏菜单
    },
    secondary: {
      main: `#263238`,
      contrastText: `#81C784`,
    },
  },
  typography: {
    fontSize: 25,
  },
  components: {
    // 精准覆盖侧边栏菜单项的样式
    RaSidebarMenuItem: {
      styleOverrides: {
        root: {
          color: `#81C784`,
          '&:hover': {
            color: `#A5D6A7`,
          },
          '&.Mui-selected': {
            color: `#81C784`,
          },
        },
      },
    },
  },
});

在Admin组件中正常使用该主题：

<Admin theme={myTheme} ... >
  {/* 你的资源配置 */}
</Admin>

方案二：自定义Sidebar组件完全控制样式 #

如果主题覆盖不生效，可以直接自定义Sidebar，替换默认菜单组件：

1. 创建自定义侧边栏菜单项：

import { SidebarMenuItem, SidebarMenuItemProps } from 'react-admin';
import { styled } from '@mui/material/styles';

const CustomSidebarMenuItem = styled(SidebarMenuItem)<SidebarMenuItemProps>`
  color: #81C784 !important;
  &:hover {
    color: #A5D6A7 !important;
  }
  &.Mui-selected {
    color: #81C784 !important;
  }
`;

2. 创建自定义Sidebar：

import { Sidebar, SidebarProps, SidebarMenu } from 'react-admin';

const CustomSidebar = (props: SidebarProps) => (
  <Sidebar {...props}>
    <SidebarMenu menuItem={CustomSidebarMenuItem} />
  </Sidebar>
);

3. 创建自定义Layout：

import { Layout, LayoutProps } from 'react-admin';

const CustomLayout = (props: LayoutProps) => (
  <Layout {...props} sidebar={CustomSidebar} />
);

4. 在Admin中应用自定义Layout：

<Admin layout={CustomLayout} theme={myTheme} ... >
  {/* 你的资源配置 */}
</Admin>

注意事项 #

• 确保@mui/material与react-admin版本兼容，react-admin v4+需要搭配MUI v5，旧版本样式覆盖逻辑不同。
• !important用于强制覆盖默认样式，若能精准匹配选择器可省略。

内容的提问来源于stack exchange，提问作者Juan Perez