material-ui 按钮活动样式

Question

我正在尝试练习如何让链接到组件的 appbar 按钮在活动时显示不同的样式。

我还应该注意：这是我的第一个 material-ui 应用程序，文档不太清楚。

基本上我想在激活的按钮上加下划线。

<Button color="inherit" component={Link} to={"/"}>Home</Button>
<Button color="inherit" component={Link} to={"/About"}>About</Button>

我的完整代码。

import React, {useState } from 'react';
import { Link as Links } from 'react-router-dom';
import ReactDOM from 'react-dom';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Fab from '@material-ui/core/Fab';
//import Icon from '@material-ui/core/Icon';
import Toolbar from '@material-ui/core/Toolbar';
import Link from '@material-ui/core/Link';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';

const useStyles = makeStyles(theme => ({
    root: {
      flexGrow: 1,
    },
    menuButton: {
      marginRight: theme.spacing(2),
    },
    fab: {
      position: 'absolute',
      background:'red',
      bottom: theme.spacing(2),
      right: theme.spacing(2),
      "&:hover, &:focus":{
        background:'black',
      }
    },
    title: {
      flexGrow: 1,
      align:'center',
    },
  }));



  function Nav() {

    const classes = useStyles();
    const [icon,setIcon] = useState(false)

    const fabIcon = {
      color: 'white',
      fontSize: 40,
    };


    const handleClick = e => { 
      setIcon(!icon)
      { icon ? document.getElementById("player").play() : document.getElementById("player").pause() }
    }


    return (
      <div className={classes.root}>
        <AppBar position="static">
          <Toolbar>
            <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="Menu">
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" align="center" className={classes.title}>
              News
            </Typography>
            <Button color="inherit">Login</Button>
            <Button color="inherit" component={Links} to={"/"} linkButton={true}>Home</Button>
            <Button color="inherit" component={Links} to={"/about"}>About</Button>
          </Toolbar>
        </AppBar>
        <AppBar position="static">
      </AppBar>
        <audio id="player">
                <source
                    src="https://samcloud.spacial.com/api/listen?sid=106487&m=sc&rid=184639"
                    type="audio/mpeg"
                />
            </audio>
            <Fab aria-label='test' className={classes.fab}>
            <i className='large material-icons' style={fabIcon} onClick={handleClick}>
            { icon ? 'play_circle_outline' : 'pause_circle_outline'}</i>
          </Fab>
      </div>
    );
  }


  export default class GrandChild extends React.Component {

    componentDidMount() {
      setTimeout(function(){ document.getElementById("player").play() }, 3000);
    }

    value() {
      return ReactDOM.findDOMNode(this.refs.input).value;
    }

    render() {
      return (
        <div> 
          <Nav />
        </div>
      );
    }
  }

Answer 1

我最近遇到了同样的问题，我通过使用 NavLink 而不是 React-router-dom 中的 Link 解决了它！

例子：

<Button
  className={classes.button}
  component={NavLink}
  to="/page-link"
>

这会将“.active”类添加到活动按钮。

使用材质的 makeStyles 钩子，您可以使用此类设置按钮的样式：

const useStyles = makeStyles({
  button: {
    "&.active": {
      background:'black',
    },
  },
});