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',
    },
  },
});

Answer 2

如果您没有使用任何第三方库，例如Gatsby、React-router，那么您应该考虑一下Tabs

代码：

import React from 'react';
import { makeStyles, Theme } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';

interface TabPanelProps {
  children?: React.ReactNode;
  index: any;
  value: any;
}

function TabPanel(props: TabPanelProps) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box p={3}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

function a11yProps(index: any) {
  return {
    id: `simple-tab-${index}`,
    'aria-controls': `simple-tabpanel-${index}`,
  };
}

const useStyles = makeStyles((theme: Theme) => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper,
  },
}));

export default function SimpleTabs() {
  const classes = useStyles();
  const [value, setValue] = React.useState(0);

  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
    setValue(newValue);
  };

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Tabs value={value} onChange={handleChange} aria-label="simple tabs example">
          <Tab label="Item One" {...a11yProps(0)} />
          <Tab label="Item Two" {...a11yProps(1)} />
          <Tab label="Item Three" {...a11yProps(2)} />
        </Tabs>
      </AppBar>
      <TabPanel value={value} index={0}>
        Item One
      </TabPanel>
      <TabPanel value={value} index={1}>
        Item Two
      </TabPanel>
      <TabPanel value={value} index={2}>
        Item Three
      </TabPanel>
    </div>
  );
}

To master in Material UI Tabs