javascript - 有没有办法将 PaperProps 中的样式对象移动到 Material UI 中的 makeStyles？

Question

我有一个 Material UI Menu 组件并尝试自定义其边框。我只能通过 Menu 元素上的内联 PaperProps 来完成。但是我已经有了一个 makeStyles 对象。有没有办法将样式自定义添加到 makeStyles？

const useStyles = makeStyles({
  root: {
    ...
  }
}
...
<Menu
  PaperProps={{
    style: { borderRadius: 1 },
  }}
  className={ classes.root }
>
{props.children}
</Menu>

Answer 1

您可以使用 classes 来做到这一点<Menu />的属性(property)

检查 https://material-ui.com/api/menu/ 处的 CSS 部分

Classes 属性接受一个对象，其键表示要更新的样式规则..

要覆盖纸张样式，您可以这样做

<Menu
      id="simple-menu"
      open={true}
      classes={{
        paper: classes.custom
      }}
    >

一个完整的例子可能看起来像......

import React from "react";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
import { makeStyles } from "@material-ui/core/styles";

function App() {
  const useStyles = makeStyles({
    custom: {
      borderColor: "green",
      borderWidth: "2px",
      borderStyle: "solid"
    },
    list: {
      backgroundColor: "yellow"
    }
  });

  const classes = useStyles();

  return (
    <Menu
      id="simple-menu"
      open={true}
      classes={{
        paper: classes.custom,
        list: classes.list
      }}
    >
      <MenuItem>Item 1</MenuItem>
      <MenuItem>Item 2</MenuItem>
      <MenuItem>Item 3</MenuItem>
    </Menu>
  );
}

export default App;