如何在没有下划线的情况下使 Chakra 行可点击

如何解决如何在没有下划线的情况下使 Chakra 行可点击

我能够使表格中的一行可点击，这正是我想要的：

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

但是，我不希望第一个单元格有下划线。我只是希望它显示为常规文本。我怎样才能做到这一点？

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>
  );
}

解决方法

您需要使用 css 对其进行样式设置。

将此添加到您的 app.js：

import './style.css';

在 style.css 文件夹中创建一个名为 src 的文件并添加以下代码：

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