CODEWITHSUNDEEP
reactjsstylesborderstyled-components
jinie kim
jinie kim

Reputation: 175

How can React Js make a Border-botom as a function?

I would like to give Border-bottom as a function. What should I do?

This is the code that Border-bottom should appear.๐Ÿ‘‡

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

const Header = ({ location: { pathname } }) => {
 const getStyle = (path) => {
    return {
      color: pathname === path ? "#191919" : "#B6B6B6",
      borderBottom: pathname === path ? "#191919" : null,
    };
  };
return (
    <>
   <ShapMenu>
       <ShapLinks to="/covid19" style={getStyle("/covid19")}> //Link
           <Header title="์ฝ”๋กœ๋‚˜19" current={pathname === "/covid19"} />
       </ShapLinks>
   </ShapMenu>
    </>
   );
}

This is Header Styled-components๐Ÿ‘‡

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)``;

This is a reusable component code. This code is not only used on this screen because it is a reuse code.๐Ÿ‘‡

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

export const Header = ({ title, children }) => {
  return (
    <>
      <Title>{title}</Title>
      <Items>{children}</Items>
    </>
  );
};
Header.propTypes = {
  title: PropTypes.node,
  children: PropTypes.object,
};

const Items = styled.div``;
const Title = styled.div`
  margin-right: 14px;
  font-size: 20px;
`;

This is the style property that I want to give to the title.๐Ÿ‘‡

border-bottom: 2px solid
      ${(props) => (props.current ? "#191919" : "transparent")};
    transition: border-bottom 0.5s ease-in-out;

Upvotes: 1

Views: 507

Answers (1)

Drew Reese
Drew Reese

Reputation: 203408

The CSS styled rules appear to be correct. You should pass the current prop from Header to Title.

const Header = ({ current, title, children }) => { // <-- destructure current
  return (
    <>
      <Title current={current}>{title}</Title> // <-- pass current prop
      <Items>{children}</Items>
    </>
  );
};
Header.propTypes = {
  children: PropTypes.object,
  current: PropTypes.bool,
  title: PropTypes.node
};

const Title = styled.div`
  margin-right: 14px;
  font-size: 20px;

  border-bottom: 2px solid
    ${(props) => (props.current ? "#191919" : "transparent")}; // <-- use current prop
  transition: border-bottom 0.5s ease-in-out;
`;

Edit how-can-react-js-make-a-border-botom-as-a-function

Upvotes: 1

Related Questions