【问题标题】:How to make a Chakra row clickable without underlining如何在没有下划线的情况下使脉轮行可点击
【发布时间】:2021-09-24 15:09:01
【问题描述】:

我能够在表格中创建可点击的行,这正是我想要的:

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

【问题讨论】:

    标签: javascript reactjs href chakra-ui


    【解决方案1】:

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

    将此添加到您的app.js

    import './style.css';
    

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

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

    【讨论】:

    • 当我这样做时,文本仍然是紫色的
    • 你知道css吗?顺便说一句,我已经更新了答案。
    猜你喜欢
    • 1970-01-01
    • 2019-01-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-30
    • 2021-08-07
    相关资源
    最近更新 更多