Есть ли способ переместить объект стиля в PaperProps в makeStyles в пользовательском интерфейсе материала?

Question

У меня есть компонент Material UI Menu, и я пытаюсь настроить его границу. Я могу сделать это только через PaperProps, встроенный в элемент Menu. Но у меня уже есть объект makeStyles. Есть ли способ добавить эту настройку стиля в makeStyles?

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

Answer 1

Вы можете сделать это, используя classes свойство <Menu />

Проверьте CSS раздел на https://material -ui.com / api / menu /

Свойство 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;