小编Jay*_*iya的帖子

在鼠标悬停时显示文本而不是图标 - React Material ui 按钮

我在我的项目中使用材质 ui 按钮。最初,添加按钮只有+ 图标

当鼠标悬停时,我需要将按钮的内容从图标更改为文本“CREATE ITEM”

代码如下。

import Fab from '@material-ui/core/Fab';
import AddIcon from '@material-ui/icons/Add';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles(theme => ({
  iconHover: {
    '&:hover': {
      border: '2px solid green',
      //TODO display the text CREATE ITEM instead of AddIcon
    }
  },

  floatBtn: {
    marginRight: theme.spacing(1),
  },
}));



const Index = () => {
  const classes = useStyles();
  return(
  <div className={classes.floatBtn}>
    <Fab size="small" color="secondary" aria-label="add" className={classes.iconHover}>
          <AddIcon />
        </Fab>
  </div>
)};
Run Code Online (Sandbox Code Playgroud)

关于如何实现这一目标有什么想法吗?

javascript reactjs material-ui

7
推荐指数
1
解决办法
9507
查看次数

标签 统计

javascript ×1

material-ui ×1

reactjs ×1