title: How to customize react-popper arrow
body: <p>How to set arrow style the same as the popper</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from "react";
  import ReactDOM from "react-dom";
  import { Manager, Reference, Popper } from "react-popper";
  
  function App() {
    return (
      &lt;Manager&gt;
        &lt;Reference&gt;
          {({ ref }) =&gt; (
            &lt;button type="button" ref={ref}&gt;
              Reference element
            &lt;/button&gt;
          )}
        &lt;/Reference&gt;
        &lt;Popper placement="right"&gt;
          {({ ref, style, placement, arrowProps }) =&gt; (
            &lt;div
              ref={ref}
              style={style}
              className={`popover show bs-popover-${"right"}`}
            &gt;
              &lt;div className="popover-inner bg-primary"&gt;Popper element&lt;/div&gt;
              &lt;div
                className="arrow bg-primary"
                ref={arrowProps.ref}
                style={arrowProps.style}
              /&gt;
            &lt;/div&gt;
          )}
        &lt;/Popper&gt;
      &lt;/Manager&gt;
    );
  }
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById("root"));
  </code></pre>
  
  <p>Code Sandbox: <a href="https://codesandbox.io/s/bold-shape-lomrm" rel="nofollow noreferrer">https://codesandbox.io/s/bold-shape-lomrm</a></p>