reactjs 如何在Material-UI React中使用按钮作为链接,而不使用下划线和更改颜色文本?

kcwpcxri  于 2023-05-06  发布在  React
关注(0)|答案(3)|浏览(135)

我刚刚做了一个页面,并使用链接 Package 按钮,但问题是当我这样做,按钮文本有下划线
Like this(log out)
所以我的问题是,如何使一个按钮路由器在React,而不是改变任何按钮,只是添加行动与按钮,点击它,它完成了,我也这样做的功能,但它显示error like this
奇怪是,当我在沙盒上运行时,它没有错误https://codesandbox.io/s/quizzical-gould-olgow
这里是我本地代码

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
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';
import './studentHome.css'
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
import { withRouter, Link } from "react-router-dom";

const styles = {
  root: {
    flexGrow: 1,
  },
  flex: {
    flex: 1,
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20,
  },
};
const logout=()=>{
    this.props.history.push("/home");
}
function ButtonAppBar(props) {
  const { classes } = props;
  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="title" color="inherit" className={classes.flex}>
            Hệ thống thi ABC-ONLINE
          </Typography>
          <ExitToAppIcon/>
          <Link to="/"></Link>
          <Button color="inherit" onClick>Log Out</Button>

        </Toolbar>
      </AppBar>
    </div>
  );
}

ButtonAppBar.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(ButtonAppBar);

在我的本地,我复制了相同的代码作为codesandbox和它显示错误,我不知道为什么,但使用链接,它有下划线的文本,请帮助,谢谢

8fq7wneg

8fq7wneg1#

react-router-dom Link (LinkAnchor)使用<a>标记,默认情况下该标记带有下划线。
如果您将textdecoration: none添加到<Link>标签,它应该可以工作:

<Link to="/" style="text-decoration: none">
    <Button color="inherit" onClick>Log Out</Button>
</Link>
  • (注意,浏览器可能会有不同的行为,但这个解决方案应该适用于所有人,据我所知)*
pxy2qtax

pxy2qtax2#

1)也许你有一个全局css的原因下划线的按钮文本,检查您的所有css文件,
2)你可以使用Chrome F12然后Ctrl+Shift+C选择你的按钮,并查看所有的CSS对你的按钮的影响

vltsax25

vltsax253#

你可以使用useNavigate钩子

const navigate = useNavigate();
return <Button onClick={()=>navigate('/home')} children="Home"/>

别忘了导入钩子

import { useNavigate } from "react-router-dom";

相关问题