边栏 - react-admin - css class

Question

我相信有人可以帮助我，我知道现在问怎么做不合适。但也许这是一个错误：事实证明我正试图按照我在照片中指示的方式在侧边栏上放置一个绿色边框。但是我找不到方法，我找不到我需要编辑来实现它的css class。有什么帮助吗？

例如 Sidebar border what I wish

我想添加如图所示的绿色边框。我已经按照文档中的说明进行了尝试，但它不起作用：

import { Sidebar, Layout } from 'react-admin';
import { makeStyles } from '@material-ui/core/styles';

const useSidebarStyles = makeStyles({
    drawerPaper: {
        borderBootom: "15px solid #006a3c",
    },
});

const MySidebar = props => {
    const classes = useSidebarStyles();
    return (
        <Sidebar classes={classes} {...props} />
    );
};

const MyLayout = props => <Layout {...props} sidebar={MySidebar} />
export default MySidebar;

谢谢

Answer 1

你只是在属性名称中输入错误，应该是：borderBottom

实际上您需要通过添加以下样式来实现您的菜单组件： https://marmelab.com/react-admin/Admin.html#menu

const useStyles = makeStyles({
  menu: {
    borderBottom: "15px solid #006a3c",
  },
})          

const Menu = ({ onMenuClick, logout }) => {
    const isXSmall = useMediaQuery(theme => theme.breakpoints.down('xs'));
    const open = useSelector(state => state.admin.ui.sidebarOpen);
    const resources = useSelector(getResources);

    const classes = useStyles()   
    return (
        <div className={classes.menu}>
        ...
        </div>
    );
}

边栏 - react-admin - css class

Sidebar - react-admin - css class

css

reactjs

react-admin