Styled-components tips and tricks

Updated on: Sat Apr 03 2021

Meet styled components tips and tricks!

Assume we have some styled component declared as div:

copied javascript

const Header = styled.div``;

If we want to render same styled component but with different html tag we can use "as" prop on it like this:

copied jsx

const Navbar = () => (
  <Header as="nav">
    NavLink
  </Header>
);