时间戳

首页 > 解决方案 > Fab 按钮中的覆盖样式不起作用

reactjs - Fab 按钮中的覆盖样式不起作用

问题描述

我正在使用材料 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;
}

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

标签： reactjsmaterial-ui

解决方案

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

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

推荐阅读