CSS Not workling in react tooltip-CodePudding

I am using react-tooltip, but I am unable to use some css on html tool tip.

Here, is my code:

export default function App() {
  useEffect(() => {
    ReactTooltip.rebuild();
  });
  return (
    <div className="App">
      <table>
        <tbody>
          <tr>
            <td
              data-tip='<div className="unit-tooltip">
          <div className="unit-title">Unit:5401</div>
          <div className="unit-content">
            <ul>
              <li>Floor level 05 = 75</li>
              <li>Floor level 05 = 75</li>
            </ul>
          </div>
        </div>'
              data-html={true}
            >
              hover me
            </td>
            <td
              data-tip='<div className="unit-tooltip">
          <div className="unit-title">Unit:5402</div>
          <div className="unit-content">
            <ul>
              <li>Floor level 04 = 80</li>
              <li>Floor level 04 = 80</li>
            </ul>
          </div>
        </div>'
              data-html={true}
            >
              hover me
            </td>
          </tr>
        </tbody>
      </table>

      <ReactTooltip place="bottom" effect="solid" type="light" />
    </div>
  );
}

All these td, would be dynamically listed.

I have used background color for class unit-title, but its not working. Here is the sandox link

CodePudding user response：

In your td, it should be class, not className, because react-tooltip render a raw html, not jsx

<td
    data-tip='<div >
          <div >Unit:5401</div>
          <div >
            <ul>
              <li>Floor level 05 = 75</li>
              <li>Floor level 05 = 75</li>
            </ul>
          </div>
        </div>'
    data-html={true}
>
    hover me
</td>