代码之家 › 专栏 › 技术社区 › James

使用已设置样式的组件设置材质UI抽屉组件的样式

styled-components material-ui reactjs

James · 技术社区 · 6 年前

我正在尝试将下面抽屉组件的样式移植到样式化组件中。

    <Drawer
      variant="permanent"
      classes={{
        paper: classes.drawerPaper
      }}
    >

哪里 paper 样式如下:

const styles = theme => ({
  drawerPaper: {
    position: "relative",
    width: 240px
  }
});

我不知道如何定制 纸张 通过样式化组件进行支撑。以下样式化组件语法不起作用:

export const StyledDrawer = styled(Drawer)`
    position: "relative";
    width: 240px;
`;

这个 source-code for this component表示此作为道具传递为 PaperProps 但我仍然无法找到一种方法来覆盖它。

3 回复 | 直到 6 年前

Olivier Tassinari NearHuscarl 5 年前

我最近在 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;

connect2Coder 6 年前

我会在评论中给出我的答案,但由于我没有足够的声誉,我无法发表评论。无论如何,看看样式化的组件 documentation . 它说:

如果您尝试使用variant permanent设置抽屉样式,您将可能需要影响抽屉的基本纸张样式。然而这不是抽屉的根元素,因此不是样式化组件上述自定义将不起作用。您可以通过使用稳定的JSS类名,但最可靠的方法是使用属性引入替代样式,然后设置其样式通过&具有更高的特异性;。

还请看按钮的示例。如果您仍然无法理解这里的评论,我将尝试进一步提供帮助。

Owen Allen 4 年前

这其实相当容易。您可以传递纸张对象将使用的组件,以便轻松传递自己的样式。

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>
  )
}