NextJS尾风样式出错

hrirmatl 于 2022-10-01 发布在其他

关注(0)|答案(1)|浏览(167)

当我使用分离的组件时，结果看起来很奇怪，就像这个分离的组件代码：

<>
      <Head>
        <title>Staycation | Home</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <meta name="description" content="We provide what you need to enjoy your holiday with family. House, Villa, Resort booking administration." />
        <meta name="og:title" content="Staycation | Home" />
        <meta name="og:description" content="We provide what you need to enjoy your holiday with family. House, Villa, Resort booking administration." />
      </Head>
      <div className="min-h-screen">
        <NavbarComponent />
        <HeroSection />
        <MostPickedSection />
        <CategoriesSection />
        <TestimonialSection />
        <FooterComponent />
      </div>
    </>

如果我直接把组件放在一起，没有分开，结果很好

<Head>
        <title>Staycation | Home</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <meta name="description" content="We provide what you need to enjoy your holiday with family. House, Villa, Resort booking administration." />
        <meta name="og:title" content="Staycation | Home" />
        <meta name="og:description" content="We provide what you need to enjoy your holiday with family. House, Villa, Resort booking administration." />
      </Head>
      <div className="min-h-screen">
        <NavbarComponent />
        <div className="flex flex-col-reverse md:flex-row container-item mt-4 md:mt-16">
          <div className="flex flex-col justify-between flex-1">
            <div className="flex md:block flex-col items-center">
              <h1 className="mt-5 md:mt-0 font-bold text-center md:text-left text-2xl md:text-5xl text-primaryColor" style={{ lineHeight: '170%' }}>
                FORGOT BUSY WORK,
                <br />
                START NEXT VACATION
              </h1>
              <p className="w-4/5 md:w-2/5 mx-auto md:mx-0 mt-2 font-light text-center md:text-left text-xs md:text-base text-greyColor" style={{ lineHeight: '170%' }}>
                We provide what you need to enjoy your holiday with family. Time to make another memorable moments.
              </p>
              <button type="button" className="w-4/5 md:w-1/3 py-4 md:py-4 mt-3 md:mt-8 md:font-medium text-xs md:text-base rounded-md shadow-2xl transition-all duration-75 hover:opacity-80 text-whiteColor bg-secondaryColor">
                Show Me Now
              </button>
            </div>
            <div className="hidden md:flex justify-between items-center w-2/3">
              <HeroItem icon="/icons/Travellers.svg" title="10.203" description="Travellers" />
              <HeroItem icon="/icons/Treasures.svg" title="781" description="Treasures" />
              <HeroItem icon="/icons/Cities.svg" title="1.492" description="Cities" />
            </div>
          </div>
          <div className="flex justify-end flex-1">
            <img src="../images/Hero.png" alt="Hero" className="w-full md:w-4/5 mt-2 md:mt-0" />
          </div>
        </div>
        <MostPickedSection />
        <CategoriesSection />
        <TestimonialSection />
        <FooterComponent />
      </div>

，如果我再次将代码从未分离的组件更改为分离的组件(在得到良好的结果后)，它将恢复到良好的结果
我希望你们明白我的意思，我对此很困惑