即使点击器没有触摸按钮中的文本，如何使按钮可点击？

Question

基本上，我有三个按钮，如下图所示。当我点击按钮的实际文本时，它会重定向，但如果我点击按钮内的其他任何地方，则没有任何反应。

 <Button
                variant="outlined"
                size="large"
                color="inherit"
                style={{ marginRight: '1rem' }}
                sx={{
                    ':hover': {
                        opacity: '',
                        borderColor: '#5865f2', // theme.palette.primary.main
                    },
                }}
            >
                <Link style={{ textDecoration: 'none', color: 'white' }} to="/portfolio" className="home-left-portfolio">PortFolio</Link>
            </Button>

我的目标是无论我们是否在按钮的文本中单击，都让它重定向。

Answer 1

用 < Link > 按钮包裹你的按钮

 <Link style={{ textDecoration: 'none', color: 'white' }} to="/portfolio" className="home-left-portfolio">PortFolio
     <Button
                    variant="outlined"
                    size="large"
                    color="inherit"
                    style={{ marginRight: '1rem' }}
                    sx={{
                        ':hover': {
                            opacity: '',
                            borderColor: '#5865f2', // theme.palette.primary.main
                        },
                    }}
                >
                    
                </Button>
    </Link>

Answer 2

试试这个：

     <Link style={{ textDecoration: 'none', color: 'white' }} to="/portfolio" className="home-left-portfolio"><Button
                variant="outlined"
                size="large"
                color="inherit"
                style={{ marginRight: '1rem' }}
                sx={{
                    ':hover': {
                        opacity: '',
                        borderColor: '#5865f2', // theme.palette.primary.main
                    },
                }}
            >
                PortFolio
            </Button>
     </Link>

Answer 3

而不是

<button><link></link></button>

尝试

<link><button></button></link>

应该有帮助

即使点击器没有触摸按钮中的文本，如何使按钮可点击？

How to make the button clickable even if the clicker doesn't touch the text in the button?

reactjs

react-router

material-ui

react-router-dom