您如何更改材料UI晶圆厂的高度？

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