如何在React中实现函数式Border-bottom样式？

Got it, let's fix this step by step. The core issue is that your reusable Header component wasn't leveraging the current prop you're passing to it, so we need to wire that up to the styled Title element where you want the border effect.

Step 1: Update the Reusable Header Component #

First, we'll modify the Header to accept the current prop, pass it to the Title styled component, and apply your desired conditional border styles directly there. This keeps the component reusable while letting it handle its own active state styling.

Here's the updated code for your reusable Header:

import PropTypes from "prop-types";
import styled from "styled-components";
import React from "react";

export const Header = ({ title, children, current }) => {
  return (
    <>
      <Title current={current}>{title}</Title>
      <Items>{children}</Items>
    </>
  );
};

Header.propTypes = {
  title: PropTypes.node,
  children: PropTypes.object,
  current: PropTypes.bool, // Add prop type for the active state
};

// Set a default to avoid undefined issues when current isn't passed
Header.defaultProps = {
  current: false,
};

const Items = styled.div``;

const Title = styled.div`
  margin-right: 14px;
  font-size: 20px;
  // Apply your conditional border and transition here
  border-bottom: 2px solid ${(props) => (props.current ? "#191919" : "transparent")};
  transition: border-bottom 0.5s ease-in-out;
`;

Step 2: Clean Up the Route Component #

Now, in your route component, you can keep passing the current prop to Header (you were already doing this correctly!) and remove the unused borderBottom line from the getStyle function—since we're now handling that style in the Header's Title component.

Here's the adjusted route component code:

import React from "react";
import { Header } from "../BaseLabel";
import { Link, withRouter } from "react-router-dom";
import styled from "styled-components";

const HeaderNav = ({ location: { pathname } }) => {
  const getStyle = (path) => {
    return {
      color: pathname === path ? "#191919" : "#B6B6B6",
      // Remove borderBottom here—it's now handled in the Header's Title
    };
  };

  return (
    <>
      <ShapMenu>
        <ShapLinks to="/covid19" style={getStyle("/covid19")}>
          <Header title="코로나19" current={pathname === "/covid19"} />
        </ShapLinks>
        {/* Add other navigation links here with their own current checks */}
      </ShapMenu>
    </>
  );
};

const ShapMenu = styled.div`
  display: flex;
  box-sizing: content-box;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-behavior: smooth;
  scrollbar-color: inherit;
  cursor: pointer;
`;

const ShapLinks = styled(Link)`
  padding: 8px 0; // Add padding to make the click area larger and border look cleaner
  text-decoration: none; // Remove default link underline
`;

export default withRouter(HeaderNav);

Why This Works #

• We made the reusable Header flexible by letting it accept a current prop, so it can be used in any context where you need an active/inactive state indicator.
• The styled Title component uses the current prop to conditionally apply the border color, with a smooth transition for a polished state change.
• We cleaned up redundant style logic in the route component, keeping concerns separated (navigation handles text color, while the Header handles its own border styling).

内容的提问来源于stack exchange，提问作者jinie kim