React, styled-components - 显示 cursor: pointer; 如果菜单打开在页面上？

Question

I have a styled.div for displaying page content underneath a navbar. The mobile size page has a button that unveils a nav menu onClick , and I have a click handler for the page component so if the user clicks on the page content ( PageContainer ) while the menu is open, it closes the menu.

Here's the nav component - it's the entry point for the site, and all the pages get rendered below in the PageContainer (I'm using hookrouter ):

const Nav = () => {
    const [isOpen, setIsOpen] = useState(true);
    const routeResult = useRoutes(directions);
  
  // Click handler for the page content area
    const backgroundClickHandler = () => {
        if (isOpen) {
            setIsOpen(!isOpen);
        }
  };
  
  // Click handler for menu toggle button
    const toggleClickHandler = () => setIsOpen(!isOpen);

    return (
        <Container>
            {/* Mobile menu toggle button ( */}
            <ToggleContainer>
                <button
                    className='fas fa-bars fa-2x'
                    onClick={toggleClickHandler}
                ></button>
            </ToggleContainer>
      {/* Mobile menu  */}
        <NavWrapper>
                    <ul>
                        {routes.map(({ key, href, label }) => (
              <li key={key}>
                                <A href={href} className='nav-route'>
                                    {label}
                                </A>
                            </li>
                        ))}
                    </ul>
                </NavWrapper>
      {/* This is the page content area */}
            <PageContainer onClick={backgroundClickHandler}>
                {routeResult || <NotFoundPage />}
            </PageContainer>
        </Container>
    );
};

export default Nav;

Here's the PageContainer styled.div :

const PageContainer = styled.div`
    position: absolute;
    top: 16rem;

    @media (min-width: 40rem) {
        position: relative;
        top: auto;
    }
`;

How would you recommend I go about adding cursor: pointer; to the PageContainer if useState isOpen = true ?

I thought about making another PageContainer , eg PageContainerIsOpen , that could be used if the menu is open and render each one conditionally via a ternary expression, but I'm afraid it would be very expensive. Is there a way I can build the condition into the PageContainer itself? Other ideas?

Answer 1

You can pass down props to a styled component. For instance you can do something like:

const PageContainer = styled.div`
   cursor: ${props => props.isOpen? 'pointer' : 'unset'};
`

And call it like:

<PageContainer isOpen={isOpen} />