[英]Transforming Material-UI Drawer with makeStyles into one with styled-component
[英]Styling Material-UI Drawer component with Styled Components
我正在尝试将下面 Drawer 组件的样式移植到 Styled Components 中。
<Drawer
variant="permanent"
classes={{
paper: classes.drawerPaper
}}
>
,其中paper
的样式如下:
const styles = theme => ({
drawerPaper: {
position: "relative",
width: 240px
}
});
我不知道如何通过 Styled Components 自定义paper
道具。 以下样式组件语法不起作用:
export const StyledDrawer = styled(Drawer)`
position: "relative";
width: 240px;
`;
这个组件的源代码表明它作为道具作为PaperProps
传递,但我仍然找不到覆盖它的方法。
我会在评论中给出我的答案,但由于我没有足够的声誉,我无法发表评论。 无论如何,请查看样式化组件文档。 它说:
如果您尝试使用变体永久设置抽屉样式,则可能需要影响抽屉的底层纸张样式。 但是,这不是 Drawer 的根元素,因此上面的样式组件自定义将不起作用。 您可以通过使用稳定的 JSS 类名来解决此问题,但最可靠的方法是使用 classes 属性引入覆盖样式,然后通过 & 以更高的特异性设置样式。
另请查看按钮的示例。 如果您仍然无法在这里找到评论,我会尽力提供进一步帮助。
我最近在https://codesandbox.io/s/material-demo-k9l9h给出了一个例子
我希望它有帮助:
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;
这实际上相当容易。 您可以传递纸对象将使用的自己的组件,从而轻松地赋予自己的样式。
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>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.