GatsbyJS Link 组件有一个边框，就像它是用 TAB 从键盘上选择的一样

Question

我可以提到向上和向下箭头键移动选择，这让我相信它是以某种方式被选中的。

有一个 material-ui 菜单组件，它有 Gatsby Link 组件包装 MenuItems 组件。我删除了不相关的代码。

class NavBarDesktop extends React.Component {
  state = {
    anchorEl: null,
  }

  handleClick = event => {
    this.setState({ anchorEl: event.currentTarget })
  }

  handleClose = () => {
    this.setState({ anchorEl: null })
  }

  render() {        
    const { anchorEl } = this.state

    return (
      <div>
        <Button
          aria-owns={anchorEl ? 'fade-menu' : null}
          onClick={this.handleClick}
          className={classes.button}
        >
          Categories
        </Button>
        <Menu
          id="fade-menu"
          anchorEl={anchorEl}
          open={Boolean(anchorEl)}
          onClose={this.handleClose}
        >
          <Link to={'accessories'}>
            <MenuItem onClick={this.handleClose}>Accessories</MenuItem>
          </Link>
          <Link to={'automotive'}>
            <MenuItem onClick={this.handleClose}>Automotive</MenuItem>
          </Link>
          <Link to={'electronics'}>
            <MenuItem onClick={this.handleClose}>Electronics</MenuItem>
          </Link>
        </Menu>
      </div>
    )
  }
}

NavBarDesktop.propTypes = {
  classes: PropTypes.object.isRequired,
}

export default withStyles(styles)(NavBarDesktop)

有人遇到过这个吗？

Answer 1

我不太明白你的问题，但如果你希望得到 material-ui 的行为，我建议你写Third-party routing library 文档中推荐的导航按钮。

我在我的项目中使用这个：

// ./src/components/LinkMenuItem.js

import React from 'react';
import PropTypes from 'prop-types';
import Link from 'gatsby-link';

import MenuItem from '@material-ui/core/MenuItem';

const LinkMenuItem = ({ to, children, ...rest }) => (
  <MenuItem component={Link} to={to} {...rest}>
    {children}
  </MenuItem>
);

LinkMenuItem.propTypes = {
  to: PropTypes.string.isRequired,
  children: PropTypes.string.isRequired,
};

export default LinkMenuItem;

然后在您的 NavBarDesktop 组件中：

import LinkMenuItem from './path/to/component';

// ...

<Menu
  id="fade-menu"
  anchorEl={anchorEl}
  open={Boolean(anchorEl)}
  onClose={this.handleClose}
>
  <LinkMenuItem onClick={this.handleClose} to='/accessories'>Accessories</LinkMenuItem>
  <LinkMenuItem onClick={this.handleClose} to='/automotive'>Automotive</LinkMenuItem>
  <LinkMenuItem onClick={this.handleClose} to='/electronics'>Electronics</LinkMenuItem>
</Menu>

GatsbyJS Link 组件有一个边框，就像它是用 TAB 从键盘上选择的一样

GatsbyJS Link component has a border like it is selected from keyboard with TAB

reactjs

material-ui

gatsby