用样式组件创建React中的英雄部分-DEV365 开发者社区

在Web开发的世界中，制作视觉吸引力和用户友好的接口至关重要。英雄部分是可以显着增强网站美学和用户参与的关键要素之一。英雄部分通常是用户降落在网站上并在设置音调和传达主要信息中起关键作用的第一件事。在本文中，我们将引导您完成使用样式组件在React应用程序中创建一个令人惊叹的英雄部分的过程。

入门
为了创建一个令人印象深刻的英雄部分，我们将首先构建必要的组件和样式。这是我们将要使用的文件的细分：

header.js：此文件包含将容纳我们英雄部分的标题组件的定义。
global.css：此文件包含将在整个应用程序中应用的全局样式。
app.js：此文件是我们应用程序的输入点，将渲染标题组件。

标题组件（header.js）

在标题组件中，我们定义了英雄部分的结构。它由背景图像，标题和通话行动按钮组成。我们使用样式的组件根据设备的屏幕宽度应用动态样式。让我们分解代码：


"use client"; // for nextjs 13.4 
import React from "react";
import styled from "styled-components";

const Header = () => {
  return (
    <div>
      <HeroSection className="light hero">
        <div className="heroInner">
          <span>
            <h1>hero section with button</h1>
            <a href="#" className="btn btn-light">
              Explore Now
            </a>
          </span>
        </div>
      </HeroSection>
    </div>
  );
};

export default Header;

const HeroSection = styled.section`
  background: linear-gradient(to bottom, #0a0c2c80 3rem, transparent 10rem),
    url(https://images.pexels.com/photos/133325/pexels-photo-133325.jpeg?auto=compress&cs=tinysrgb&w=1260&h=600&dpr=1);
  background-position: center, bottom left;
  background-size: cover, cover;
  height: fit-content;
  color: #fafafc;
  padding: 15rem 3rem 6rem;
  .heroInner {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
  }
  span {
    max-width: 50%;
  }
  h1 {
    font-weight: 900;
    font-size: clamp(2rem, 5.5vw, 3.25rem);
    line-height: 1.2;
    margin-bottom: 1.5rem;
  }
  @media (max-width: 576px) {
    background: linear-gradient(to bottom, #0a0c2c80 3rem, transparent),
      url(https://images.pexels.com/photos/133325/pexels-photo-133325.jpeg?auto=compress&cs=tinysrgb&w=800&h=750&dpr=1);
    background-position: center, bottom left;
    background-size: cover, cover;
    align-items: flex-start;
    padding-top: 7.5rem;
    height: 75vh;
    max-height: 720px;
  }
`;

在上面的代码中，我们使用JSX定义了英雄部分的结构。 Herosection组件使用样式组件应用动态样式，包括背景图像和响应式调整。

全球风格（全球css）

接下来，让我们看一下global.css文件中定义的全局样式。这些样式将在整个应用程序中全球应用于元素：


*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
}

body {
  font-family: "Nunito Sans", sans-serif;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  font-size: 1rem;
}

button {
  font-family: inherit;
  color: inherit;
  text-decoration: inherit;
}

.btn {
  display: inline-block;
  white-space: nowrap;
  padding: 0.75rem 1.5rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: #2e2e48;
  background: #fafafc;
  border-radius: 0.66rem;
  transition: all 0.2s;
  box-shadow: 0 0.5rem 1.5rem -0.5rem currentColor;
}

.btn:hover,
.btn:focus {
  box-shadow: 0 0 0 2px #2e2e48, 0 0 0 4px #fafafc;
}

.btn:active {
  transform: scale(0.95);
}

渲染英雄部分（app.js）
最后，让我们通过将其渲染到app.js文件中：
将标题组件集成到我们的应用程序中


import React from "react";
import Header from "@/Components/Header";

export default function App() {
  return (
    <div>
      <Header />
    </div>
  );
}

标题组件是导入并在家庭功能组件中渲染的。这将在应用程序顶部显示令人惊叹的英雄部分。

结论

在本教程中，我们探索了使用React和样式组件创建引人注目的英雄部分的过程。通过结合动态样式和响应式设计技术，我们精心介绍了您网站上的视觉介绍。使用Global.css文件，我们确保了整个应用程序的一致样式。

随意自定义样式，图像和内容以符合您的项目要求。通过了解本文概述的原则，您有能力建立迷人的英雄部分，这些部分给您的网站访问者留下持久的印象。