链接组件不适用于样式组件

Question

The style not working

const MenuOption = styled(Link)`
  font-size: 14px;
`;

Only using pseudo-class that styles its works

Answer 1

The better way is to Make a styled div or ul and then wrap it around link tag. Maybe make a component for it.

Example:

const NavBarLinkDiv = styled.div`
//your styles
`;
    
export default const NavBarLink = ({children}) =>{
    return(<Link>
        <NavBarLinkDiv>{children} </NavBarLinkDiv>
        </Link>
    ) 
}