Trying to get an output equal to my inline style with styled components-CodePudding

I have written a code and included an inline style that works fine but i can't seem to do it with styled components. This is the code i want to convert to styled components;

     class NavbarLink extends React.Component {
  render() {
    const isActive = this.props.location.pathname.includes(this.props.path);
    return (
      <NavItem
        className="nav-item-padding-one-half"
        style={{
          borderBottom: isActive ? 'solid 2px var(--color-green)' : '',
        }}
      >
        <NavLink
          className={`${isActive ? 'nav-link-active' : null} nav-link`}
          to={this.props.path}
          onClick={() => this.props.onItemClicked()}
        >
          {this.props.children}
        </NavLink>
      </NavItem>
    );
  }
}

Any help?

CodePudding user response：

const BorderedDiv = styled.div`
  borderBottom: ${isActive ? "solid 2px var(--color-green)" : ''};
`;

<BorderedDiv>This is your bordered div</BorderedDiv>

CodePudding user response：

You need to use props object of styled-components.

You should construct a styled-components's component as this,

export const NavItem = styled.div`
borderBottom: ${(props) => props.isActive ? "solid 2px var(--color-green)" : ''};
`

Use this component as,

import {NavItem} from './styles'; // if styled-component in another file 
<NavItem isActive> 
// your code here
...
</NavItem>

CodePudding user response：

syntax :-

  const BorderedComp = styled.div`borderBottom :${isActive ? 'solid 2px var(--color-green'):'',};  `;

use This Component as

<BorderedComp> This is Bordered Component </BorderedComp>