title: I want to add new option to table row on hover
body: <p>I want to add a new option to the table cell on hover in ReactJS:</p>
  <p>Here is the screenshot:</p>
  <p><a href="https://i.stack.imgur.com/n44cB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n44cB.png" alt="enter image description here" /></a></p>
  <p>Here what I have done so far:</p>
  <p><a href="https://i.stack.imgur.com/LdMXh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LdMXh.png" alt="enter image description here" /></a></p>
  <p>I don't know how to hover on it and change the table cell of material UI and add that remove option to it.</p>
  <p>Here is my ReactJS:</p>
  <pre><code>                                &lt;TableRow key={row.name}&gt;
                                      &lt;TableCell style={{ verticalAlign: 'middle', display: 'flex', alignItems: 'flex-end' }} align=&quot;left&quot;&gt;
                                          &lt;SupervisedUserCircleRoundedIcon style={{ marginRight: '5px' }} /&gt;
                                          {row.importedGroups}
                                      &lt;/TableCell&gt;
                                      &lt;TableCell align=&quot;left&quot;&gt;{row.importedAs}&lt;/TableCell&gt;
                                      {/* &lt;TableCell align=&quot;left&quot;&gt;
                                          &lt;Select
                                              value={selected}
                                              onChange={handleChange}
                                              name=&quot;select_importas&quot;
                                              style={{ minWidth: 120, font: 'normal normal 600 16px/22px Open Sans' }}
                                              displayEmpty
                                          &gt;
                                              &lt;MenuItem value=&quot;&quot;&gt;Normal Group&lt;/MenuItem&gt;
                                              &lt;MenuItem value=&quot;super_Group&quot;&gt;Super Group&lt;/MenuItem&gt;
                                          &lt;/Select&gt;
                                      &lt;/TableCell&gt; */}
                                  &lt;/TableRow&gt;
  </code></pre>
  <p>Here is my CSS:</p>
  <pre><code>.MuiTableCell-root {
      border-bottom: none !important;
      padding: 20px;
  }
  </code></pre>
  <p>I just want to change the color of Table cell color on hover and add a visible option of <code>Remove</code> to it as shown in the screenshot above in material UI.</p>