调整 react-admin 应用侧边栏大小的简单解决方案

Question

我只是想根据文档 "Sidebar Customization" 此处定义侧边栏的宽度：https://marmelab.com/react-admin/Theming.html

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
    sidebar: { // <- Error 'sidebar' does not exist in type 'ThemeOptions'
        width: 300, // The default value is 240
        closedWidth: 70, // The default value is 55
    },
});
const App = () => (
    <Admin theme={theme} dataProvider={simpleRestProvider('http://path.to.my.api')}>
        // ...
    </Admin>
);

我得到一个：

 'sidebar' does not exist in type 'ThemeOptions'

在查看 material-ui.core.styles.ThemeOptions

时，这是正确的

简单调整边栏大小的最简单方法是什么？我喜欢这样做，因为我的 MenuItemLink 文本与边栏的大小重叠。

Answer 1

不需要createMuiTheme()调用：

const darkTheme = {
  sidebar: {
    width: 220, 
    closedWidth: 55, 
  },
}

Answer 2

只有这段代码对我有用，因为它们在 v3.9.4 上不导出类型，但我使用的是 TS。

import { ThemeOptions } from "@material-ui/core";

export interface CustomThemeOptions extends ThemeOptions {
  sidebar?: {
    width?: number;
    closedWidth?: number;
  };
}

const theme: CustomThemeOptions = {
  ...defaultTheme,
    sidebar: {
        width: 100,
        closedWidth: 40,
    },
};

问题https://github.com/marmelab/react-admin/issues/5426

Answer 3

在当前版本 3.19.10 中，如果您不希望菜单项标签以 240px 的原始侧边栏宽度换行，则还必须加宽菜单。例如

import { defaultTheme } from "react-admin";

export const defaultAppTheme = {
  ...defaultTheme,
  sidebar: {
    width: 260,
    closedWidth: 55,
  },
  menu: {
    width: 260,
    closedWidth: 55,
  },
};

您可以看到从主题中提取并应用菜单宽度的位置here in their source code

调整 react-admin 应用侧边栏大小的简单解决方案

simple solution for sizing sidebar of a react-admin app

react-admin