[FIXED] How to make a Chakra row clickable without underlining

Issue

I was able to make a row in a table clickable, which is what I want:

https://codesandbox.io/s/crazy-sinoussi-hxtwj?file=/src/app.js

However, I don't want the first cell to have an underline. I just want it to appear as regular text. How can I achieve this?

import React from "react";
import {
  Table,
  Thead,
  Tr,
  Th,
  Td,
  Tbody,
  LinkOverlay,
  LinkBox
} from "@chakra-ui/react";

export default function App() {
  return (
    <Table variant="simple" size="sm">
      <Thead>
        <Tr>
          <Th>To convert</Th>
          <Th>into</Th>
          <Th isNumeric>multiply by</Th>
        </Tr>
      </Thead>
      <Tbody>
        <LinkBox as={Tr}>
          <LinkOverlay href="https://www.google.com">inches</LinkOverlay>
          <Td>millimetres (mm)</Td>
          <Td isNumeric>25.4</Td>
        </LinkBox>
        <Tr>
          <Td>feet</Td>
          <Td>centimetres (cm)</Td>
          <Td isNumeric>30.48</Td>
        </Tr>
        <Tr>
          <Td>yards</Td>
          <Td>metres (m)</Td>
          <Td isNumeric>0.91444</Td>
        </Tr>
      </Tbody>
    </Table>
  );
}

Solution

You would need to style it using css.

Add this to your app.js:

import './style.css';

Create a file named style.css in src folder and add the following code:

*{
  text-decoration:none;
  color:black;
}

Answered By - Keshav Bajaj
Answer Checked By - - Willingham (ReactFix Volunteer)