我正在尝试将下面抽屉组件的样式移植到样式组件中。
<Drawer
variant="permanent"
classes={{
paper: classes.drawerPaper
}}
>
,其中paper
的样式如下:
const styles = theme => ({
drawerPaper: {
position: "relative",
width: 240px
}
});
我不知道如何通过样式组件自定义paper
道具。以下样式化的组件语法不起作用:
export const StyledDrawer = styled(Drawer)`
position: "relative";
width: 240px;
`;
此组件的source-code表示此项作为道具传递为PaperProps
,但我仍然无法找到覆盖它的方法。
答案 0 :(得分:1)
我会在评论中给出答案,但由于我没有足够的声誉,我无法发表评论。无论如何,请查看样式组件documentation。它说:
如果您尝试使用变体永久物设置抽屉样式,您将会 可能需要影响抽屉的底层纸张风格。然而, 这不是抽屉的根元素,因此也不是样式组件 如上所述的自定义将无效。您可以使用以解决此问题 稳定的JSS类名,但最可靠的方法是使用 classes属性引入覆盖样式,然后设置样式 具有更高的特异性,通过&amp;。
请同时查看按钮的示例。如果你仍然无法在这里找出评论,我会尽力帮助你。
答案 1 :(得分:0)
我最近在commit f496b06
中给出了一个示例我希望它能对您有所帮助:
import React, { useState } from "react";
import Drawer from "@material-ui/core/Drawer";
import styled from "styled-components";
const drawerWidth = 240;
const styles = theme => ({
drawer: {
position: "absolute",
overflowX: "hidden",
zIndex: theme.zIndex.drawer + 2,
[theme.breakpoints.up("sm")]: {
position: "relative",
width: drawerWidth,
flexShrink: 0,
zIndex: theme.zIndex.drawer
},
whiteSpace: "nowrap"
},
drawerOpen: {
width: drawerWidth,
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
})
},
drawerClose: {
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
}),
overflowX: "hidden",
width: 0,
[theme.breakpoints.up("sm")]: {
width: theme.spacing.unit * 9 + 1
}
}
});
const StyledDrawer = styled(Drawer)`
${({ theme, open }) => {
const classes = styles(theme);
return {
...classes.drawer,
...(open ? classes.drawerOpen : classes.drawerClose)
};
}}
.MuiDrawer-paper {
${({ theme, open }) => {
const classes = styles(theme);
return open ? classes.drawerOpen : classes.drawerClose;
}}
&::-webkit-scrollbar {
width: 2px;
}
&:hover {
&::-webkit-scrollbar-thumb {
display: none;
}
}
&::-webkit-scrollbar-thumb {
display: none;
}
&::-webkit-scrollbar-track {
display: none;
}
}
`;
const PersistentDrawerLeft = () => {
const [isOpen, setIsOpen] = useState(false);
const handleDrawerOpen = () => {
setIsOpen(true);
};
const handleDrawerClose = () => {
setIsOpen(false);
};
return (
<div>
<StyledDrawer variant="permanent" open={isOpen}>
<span>sidebar</span>
<button onClick={handleDrawerClose}>close</button>
</StyledDrawer>
<span>Content</span>
<button onClick={handleDrawerOpen}>open</button>
</div>
);
};
export default PersistentDrawerLeft;
答案 2 :(得分:0)
这实际上很容易。您可以传递纸张对象将使用的自己的Component,从而使您可以轻松地传递自己的样式。
import styled from "styled-components";
const StyledPaper = styled.div`
// my styles
`;
function MyComponent() {
return (
<Drawer
// normal props
PaperProps={{ component : StyledPaper }}
>
// drawer content
</Drawer>
)
}
另一种选择是也让抽屉的第一个孩子赋予样式。由于纸上有display: flex
,因此您可以将flex: 1
放在孩子身上,它将增长到纸的全部尺寸。
function MyComponent() {
return (
<Drawer
// normal props
>
<StyledDiv>
My Content
</StyledDiv>
</Drawer>
)
}