Popup: support custom styling for arrow

[traverse]

Steps

Pass a custom style to a Popup component. For example { backgroundColor: 'red' }.

Expected Result

Both the Popup's background of the arrow background change color.

Actual Result

Version

0.75.1

Testcase

https://codesandbox.io/s/w0v8mkr99w

This could be solved by adding an additional prop to style the arrow.

[brianespinosa]

@traverse you are applying a style to the component, which will work, but that style does not also target the :before pseudo element which is being used to create that arrow. You either need to use a CSS in JS library that supports targeting pseudo elements, or you need to write your own CSS style rule for a red popup that you can target by adding a .red className. I'd recommend the second approach if you are trying to do red popups everywhere. Colored popups are not supported out of the box with SUI core.

Either of the above solutions are not part of the scope of SUIR.

[sbrenomartins]

@traverse I had this same problem with sui popup and my solution was, using styled components, create and export an component like this:

export const MyPopup = styled(Popup)`
  ... all another css
  &:before: {
    background-color: red;
  }
`
<MyPopup></MyPopup>

And its works.