Материал-UI кнопка активный стиль - PullRequest
Новая
       15

Материал-UI кнопка активный стиль

0 голосов
/ 10 июля 2019

Я пытаюсь понять, как бы кнопки панели приложений, которые ссылаются на компоненты, когда они были активными, отображали другой стиль.

Я также должен отметить: это мое первое приложение 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>
      );
    }
  }
...