React Router Dom Link更改了我的按钮的位置

Question

我在父容器中使用flex将自定义css按钮居中，当我将按钮包装在React Router Dom Link中时，它会移动到屏幕的右侧。

任何人都知道这方面的快速解决方案，发现了很多关于去除React Router Dom Link添加的文本装饰的堆栈溢出帖子，并试图应用这些解决方案，但在去除任何潜在的空白或填充方面没有帮助。

将在这里制作一个代码沙盒和张贴链接

• 还有一个附带说明，滚动条是激活的，即使在我的本地主机上的项目中，它们不是也不应该是。有人能解释为什么会发生这种情况吗？

• 作为参考，这个设计是atm首先开发的移动设备，我还没有做平板电脑或台式机的媒体查询

ProLandingPage.js

import React from 'react'
import Container from '../LandingPageComponents/Container';
import styled from 'styled-components'
import image from '../Assets/foodImage.jpg'
import  {Link} from "react-router-dom";
export const ProLandingPage = () => {
return (
<div>
<Container>
<TopBar/>
<MenuButtonText>
Menu
</MenuButtonText>
<ContactButtonText>
Contact
</ContactButtonText>
<Title>
Authentic Asian Cuisine Delivered Straight To Your Door!
</Title>
<Image/>
<Subtitle>
Cuisines spanning China, Japan and South East Asia...
</Subtitle>
<Link to="/menu">
<Button type="button">
<ButtonText>
Order Now!
</ButtonText>
</Button>
</Link>

</Container>

</div>
)
}

const TopBar = styled.div`
position: absolute;
top: 0;
height: 70px;
width: 100%;
background: #161616;
`
const BottomBar = styled.div`
position: absolute;

`
const Image = styled.div`
position: absolute;
width: 171.45px;
height: 296px;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
top: 27%;
background-image: url(${image});
background-position: center;
background-size: cover;
border-radius: 46px;
transform: rotate(-89.85deg);
@media (max-width: 281px){
width: 150px;
height: 250px;
top: 30%;
}
`
const Title = styled.div`
position: absolute;
width: 250px;
height: 168px;

top: 17%;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 24px;
line-height: 36px;
/* or 150% */
text-align: center;
color: #000000;
`
const Subtitle = styled.div`
position: absolute;
width: 255px;
height: 78px;

top: 65.5%;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 30px;
/* or 167% */
text-align: center;
color: #000000;
@media (max-height: 601px){
top: 70%;
}
`
const Button = styled.div`
position: absolute;
display: flex;
align-items: center;
justify-content: center;
/* left: 28%; */
width: 178px;
height: 48px;
top: 78%;

background: #161616;
border-radius: 25px;
@media (max-height: 601px){
top: 83%;
}
`
const ButtonText = styled.div`
position: relative;
font-family: Roboto;
font-style: normal;
font-weight: normal;
text-align: center;
color: #F9F9F9;
`
const MenuButtonText = styled.div`
position: absolute;
width: 126px;
height: 42px;
left: 20%;
top: 23px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 40px;
/* or 250% */
text-align: center;
color: #F9F9F9;
@media (max-width: 281px){
left: 10%;
}
`
const ContactButtonText = styled.div`
position: absolute;
width: 126px;
height: 42px;
right: 20%;
top: 23px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 40px;
/* or 250% */
text-align: center;
color: #F9F9F9;
@media (max-width: 281px){
right: 10%;
}
`

Answer 1

添加类似的链接

<Link style={{ width: "100%", display: 'flex', justifyContent: 'center' }} to="/menu">
<Button type="button">
<ButtonText>Order Now!</ButtonText>
</Button>
</Link>

Answer 2

编辑

好吧，因为你需要向链接添加样式，以便position: absolute在按钮上工作，所以你必须用你可以定位的东西包装<Link>。您可以通过将它包装在类似<p>或<div>的东西中来实现这一点。

假设你把它包装在<div>中，现在你可以设置position: relative并决定它在哪里，然后你的按钮将根据链接的位置进行定位。

此外，我认为你可以只定位你的按钮，而不是absolute，并摆弄它的位置，但我认为这不是你想采取的方法。