React-Router-Dom Link 改變了我的按鈕的位置

Question

我在父容器中使用 flex 將自定義 css 制作按鈕居中，當我將按鈕包裝在 React-Router-Dom 鏈接中時，它會移動到屏幕的右側。

任何人都知道對此的快速修復，發現了很多關於擺脫 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

編輯

好的，因為您需要向 Link 添加樣式，以便position: absolute作用於 Button，您將不得不將<Link>包裹在您可以定位的位置。 您可以通過將其包裝在<p>或<div> 。

假設您將它包裝在<div>現在您可以設置position: relative並決定它的位置，然后您的按鈕將根據鏈接的位置定位。

此外，我認為您可以不absolute放置按鈕並擺弄它的放置位置，但我認為這不是您想要采取的方法。