如何将 Material UI Fab 设置为 Outline答案

【问题标题】：How to set Material UI Fab to Outline如何将 Material UI Fab 设置为 Outline
【发布时间】：2020-11-30 12:49:36
【问题描述】：

有没有办法在material ui 中使用fab button 的轮廓变体

<Fab variant="here i see rounded || extended" color="primary" size="small" aria-label="scroll back to top">
  <KeyboardArrowUp />
</Fab>

有没有办法可以在使用大纲版本的同时仍然继承材质 ui 波纹效果和其他样式

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

据我所知，你不能有大纲版本。但是你总是可以为此编写 CSS。我为此有一个simple demo
编辑：这是代码

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      "& > *": {
        margin: theme.spacing(1)
      }
    },
    fabStyle: {
      backgroundColor: "white",
      color: theme.palette.primary.light,
      borderColor: theme.palette.primary.light,
      "&:hover": {
        backgroundColor: theme.palette.primary.light,
        color: "white"
      }
    }
  })
);

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

  return (
    <div className={classes.root}>
      <Fab color="primary" aria-label="add" className={classes.fabStyle}>
        <AddIcon />
      </Fab>
    </div>
  );
}

【讨论】：

【解决方案2】：

您应该能够将类注入到 Fab 组件中。您可以参考此链接了解更多信息Customizing Components

<Fab 
    classes={{
      root: classes.root, // class name, e.g. `classes-nesting-root-x`
      label: classes.label, // class name, e.g. `classes-nesting-label-x`
    }}
    variant="here i see rounded || extended" color="primary" size="small"     aria-label="scroll back to top">
  <KeyboardArrowUp />
</Fab>

【讨论】：