DEV Community

Discussion on: Using usePopper and styled-components to create a practical dropdown from scratch

Collapse
 
waifutech profile image
Lewd Technologies Inc. • Edited

Making that arrow work requires some reverse-engineering on your part. Long story short:

.dropdownPopper

...

  &[data-popper-placement^='top'] > [data-popper-arrow]
    bottom: -4px

  &[data-popper-placement^='right'] > [data-popper-arrow]
    left: -4px

  &[data-popper-placement^='bottom'] > [data-popper-arrow]
    top: -4px

  &[data-popper-placement^='left'] > [data-popper-arrow]
    right: -4px

  [data-popper-arrow]
    position: absolute
Enter fullscreen mode Exit fullscreen mode