Question

只需进行Web编程，并尝试更改侧边栏背景的颜色。这有效：

const useStyles = makeStyles(theme() => ({ 
    drawer: {
        backgroundColor:'#FFFFFF'
    },
}));

const MySidebar = (props:any) => {
    const classes = useStyles();
    return (
        <Sidebar className={classes.drawer} {...props} />
    );
);

...但这不是：

const useStyles = makeStyles(theme() => ({ 
    drawer: {
        backgroundColor:'#FFFFFF'
    },
}));

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

为什么不起作用？以及如何找出要覆盖的CSS类名称是什么？我使用了Chrome的检查器工具，并且CSS类名称为“ MuiDrawer-docked”，所以我不知道它最终如何变成“抽屉”。

我还在尝试将侧边栏的宽度设置为0（实际上是将其隐藏）。如果我将其放在主题之外，它会起作用：

sidebar: {
    width: 300,
    closedWidth: 0,
},

但是一旦将其放入useStyle中，它就不会：

const useStyles = makeStyles(theme() => ({ 
    sidebar: {
        width: 300,
        closedWidth: 0,
    },
}));

const MySidebar = (props:any) => {
    const classes = useStyles();
    return (
        <Sidebar className={classes.sidebar} {...props} />
    );
);

我最终要实现的是这两者的结合（背景颜色更改+侧边栏宽度接近0），因此使用了“类”而不是className。

Answer 1

在您的第二个示例中，由于以下原因，它不起作用：

<侧边栏类 = {classes} {... props} />

课程应为 className 。

此外，在第一个示例中，您访问了 classes.drawer 对象，该对象实际上包含样式。而在第二个示例中，您只是传递了类对象，而没有实际指定它应使用的键。

最后，在您的最后一个示例中：

    const useStyles = makeStyles(theme() => ({ 
    sidebar: {
        width: 300,
        closedWidth: 0,
    },
    }));

您正在尝试使用 closedWidth 作为CSS样式。不存在封闭宽度作为CSS样式。

要在React中动态更改元素的宽度，您可能需要使用对dom节点的引用来即时更改样式。

您可以找到有关裁判here

的有用信息

如何设置边栏样式？

1 个答案: