DEV Community

loading...

Discussion on: Advanced Usage of Styled Components for your React App - Part 1

Collapse
orkhanjafarovr profile image
Orkhan Jafarov

Nice explanation!
I'll add, in the new version of styled-components it possible to handle error when React throwing an error when you use unsupported/uncommon attributes for elements. styled-components.com/docs/api#tra...

Let's say:

<MenuNavigation opened  />
// Warning: unknown props 'opened' and bla bla
Enter fullscreen mode Exit fullscreen mode

To handle it you can use $ symbol

<MenuNavigation $opened  />

const MenuNavigation = styled.div`
  display: ${props => props.$opened ? 'block' : 'none'};
`;
Enter fullscreen mode Exit fullscreen mode