在鼠标悬停时显示文本而不是图标 - 反应材质 ui 按钮

问题描述：

我在项目中使用了材质ui按钮.最初，添加按钮仅具有 +图标.

I am using material ui button in my project. Initially the add button is having only + icon.

当鼠标悬停时，我需要将按钮的内容从图标更改为文本创建项目"

When the mouse is hovered I need to change the content of button from the icon to the text "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>
)};

关于如何实现这一目标的任何想法?

Any idea on how to achieve this?

答

您可以使用 onMouseOver 和 onMouseOut :

const Index = () => {
  const [hover,sethover]=useState(false);
  const classes = useStyles();
  return(
  <div className={classes.floatBtn}>
    <Fab onMouseOver={()=>sethover(true)} 
     onMouseOut={()=>sethover(false)} 
     size="small" color="secondary" aria-label="add" 
     className={classes.iconHover}>
          {hover?:("some text"):(<AddIcon />)
        </Fab>
  </div>
)};

在鼠标悬停时显示文本而不是图标 - 反应材质 ui 按钮

相关推荐