Fab 按钮中的覆盖样式不起作用答案

【问题标题】：Override styles in Fab button is not workingFab 按钮中的覆盖样式不起作用
【发布时间】：2020-09-29 18:46:24
【问题描述】：

我正在使用材质 ui 进行反应，并添加了 fab 按钮，组件为：

     import React from "react";
import Styles from "./content-header.module.css";
import Fab from "@material-ui/core/Fab";
import AddIcon from "@material-ui/icons/Add";
import Box from "@material-ui/core/Box";
     
     const ContentHeaderTitle = ({ title, showIcon, handleOpen }) => {
       return (
         <Box display="flex" justifyContent="space-between" mb={2}>
           <h4 className={Styles.title}>{title}</h4>
           {showIcon ? (
             <Fab
               size="medium"
               aria-label="add"
               onClick={handleOpen}
               className={Styles.fabBackground}
               color="inherit"
             >
               <AddIcon />
             </Fab>
           ) : null}
         </Box>
       );
     };
     
     export default ContentHeaderTitle;

我想更改背景，这就是为什么我创建了一个 .module.css 并导入了我们在上一个代码中看到的内容。该css有：

.title {
  margin: 0;
  color: #4c4c4c;
  font-weight: 700;
  font-size: 2.4rem;
}

.fabBackground {
  background-color: rgb(3, 135, 195);
  color: white;
}

标题样式有效，但按钮无效

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

也许您可以尝试使用classes 并触发已定义的根类

<Fab
     size="medium"
     aria-label="add"
     onClick={handleOpen}
     classes={{ root: `${Styles.fabBackground}` }}
     color="inherit"
>

【讨论】：