如何在不加下划线的情况下使脉轮行可点击

Question

我能够在 table 可点击的行中创建一行，这正是我想要的：

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

Answer 1

您需要使用 css 来设置样式。

将此添加到您的 app.js：

import './style.css';

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

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

如何在不加下划线的情况下使脉轮行可点击

How to make a Chakra row clickable without underlining

javascript

reactjs

href

chakra-ui