How customize popup pointing arrow?

[jjavierdguezas]

Describe the bug I can't see a way to customize the popup, specifically its pointing arrow.

Screenshot

Expected behavior A way to change the popup's pointing arrow by styles of by props

Dependencies versions

• semantic-ui-react: "0.88.1"
• semantic-ui-less: "2.4.1"
• semantic-ui-calendar-react: "0.15.3"

[jjavierdguezas]

@arfedulov help please

[DovahBrownies]

@jjavierdguezas

You can color the arrow by coloring the :before element:

You can color all of the popup arrows as such:

.ui.popup:before {
    background: red !important;
}

Or if you want to target a specific arrow, you can, for example, take the popupPosition into consideration. For exmaple:

If the popupPosition for your calendar is popupPosition='bottom center', then you can target the arrow like so:

.ui.bottom.center.popup:before {
    background: red !important;
}

Hope this helps!

[jjavierdguezas]

Thanks @DovahBrownies but how can I target calendar specific popups? I can't see a class or an id nothing in order to coloring the DateInput's popup. The html code is at the bottom of the page and it shows:

<div class="ui bottom left flowing popup transition visible"
    style="right: auto; position: absolute; padding: 0px; filter: none; will-change: transform; top: 0px; left: 0px; transform: translate3d(679px, 327px, 0px);">
    <div tabindex="0" style="outline: none;">
        <table class="ui celled unstackable center aligned table" style="width: 100%; min-width: 22em; outline: none;">
            <!-- .... -->
        </table>
    </div>
</div>

If I go with any of your suggestions it will color all the popups right? any thoughts?

[DovahBrownies]

@jjavierdguezas Unfortunately, yes, this will change all popups, as you mentioned. Currently there's no way to target the calendar specifically as it is generated at the bottom of your rendered HTML (also as mentioned).

[jjavierdguezas]

thanks again @DovahBrownies so my request is still open

[DovahBrownies]

@jjavierdguezas I have a PR that isn't being addressed as it seems that the creator doesn't have much time to maintain this project. If I were you, I would fork the project and change the source code myself...

[sbrenomartins]

@jjavierdguezas 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.