title: How to make a arrow dialog box in Material UI
body: <p>I know how to make an arrow box (div) using custom CSS and HTML, but I don't know how to implement the same in Material UI and react js, Below is the code to do the same with custom CSS.
  How to use the same CSS in material UI is my question.
  Codepen example <a href="https://codepen.io/lideo/pen/jawFy" rel="nofollow noreferrer">div which contains an arrow</a></p>
  <pre><code>.arrow_box {
      position: relative;
      background: #88b7d5;
      border: 4px solid #c2e1f5;
  }
  .arrow_box:after, .arrow_box:before {
      right: 100%;
      top: 50%;
      border: solid transparent;
      content: &quot; &quot;;
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
  }
  
  .arrow_box:after {
      border-color: rgba(136, 183, 213, 0);
      border-right-color: #88b7d5;
      border-width: 30px;
      margin-top: -30px;
  }
  .arrow_box:before {
      border-color: rgba(194, 225, 245, 0);
      border-right-color: #c2e1f5;
      border-width: 36px;
      margin-top: -36px;
  }
  </code></pre>