如何更改 material-ui fab 的高度？

Question

我想编辑我的 material-ui fab 按钮的宽度和高度。我试图通过使用classname 并应用styles 来更改它。宽度发生变化，但我的问题是高度没有变化。

这是css代码：

const dashboardStyles = makeStyles(theme => ({
    infoButton: {
        height: '20px', 
        width: '20px'
    }
}));

它改变宽度但不改变高度。感谢您的帮助。

Answer 1

你可以使用material-ui makeStyles：

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Fab from "@material-ui/core/Fab";
import AddIcon from "@material-ui/icons/Add";

const useStyles = makeStyles(theme => ({
  fab: {
    width: "80px",
    height: "80px"
  }
}));

export default function FloatingActionButton() {
  const classes = useStyles();

  return (
    <Fab className={classes.fab}>
      <AddIcon />
    </Fab>
  );
}