css - 如何从 React 表格​​中删除边框？

Question

我正在使用 React Table 在 React JS 中构建表格。 (https://github.com/tannerlinsley/react-table)。我找不到如何在 React Table 中删除边框。请帮助我，谢谢。

const tableStyle = {
  border: "none",
  boxShadow: "none"
};

class App extends React.Component{

  render(){
    const columns = [{
      Header: "Id",
      accessor: "id",
      headerClassName: 'headerTable',
      className: 'firstColumn',
    },
    {
      Header: "Name",
      accessor: "name",
      headerClassName: 'headerTable',
    },
    {
      Header: "Username",
      accessor: "username",
      headerClassName: 'headerTable',
    },
    {
      Header: "Email",
      accessor: "email",
      headerClassName: 'headerTable',
    }]

    return(
      <div>
        <ReactTable
        style={tableStyle}
        data = {this.state.users}
        columns = {columns}
        />
      </div>
    );
  }
}

表格.css

.headerTable{
  background-color: #e8edf2;
  padding: 100px 0px;
  font-weight: 600;
  color: #1c2229;
  font-size: 1em;
}

这是我的 table :

Answer 1

这是取自此 code 的示例.

import React from "react";
import { render } from "react-dom";
import { makeData, Logo, Tips } from "./Utils";

// Import React Table
import ReactTable from "react-table";
import "react-table/react-table.css";

const tableStyle = {
  border: "none",
  boxShadow: "none"
};

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: makeData()
    };
  }
  render() {
    const { data } = this.state;
    return (
      <div>
        <ReactTable
          style={tableStyle}
          data={data}
          columns={[
            {
              Header: "First Name",
              accessor: "firstName",
              className: "sticky",
              headerClassName: "sticky"
            },
            {
              Header: "Last Name",
              id: "lastName",
              accessor: d => d.lastName
            },
            {
              Header: "Age",
              accessor: "age"
            },
            {
              Header: "Age",
              accessor: "age"
            },
            {
              Header: "Age",
              accessor: "age"
            },
            {
              Header: "Age",
              accessor: "age"
            },
            {
              Header: "Age",
              accessor: "age"
            },
            {
              Header: "Age",
              accessor: "age"
            },
            {
              Header: "Age",
              accessor: "age"
            },
            {
              Header: "Status",
              accessor: "status"
            },
            {
              Header: "Visits",
              accessor: "visits"
            }
          ]}
          defaultPageSize={10}
          className="-striped -highlight"
        />
        <br />
        <Tips />
        <Logo />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

如您所见，我定义了一个名为 tableStyle 的对象，其中包含 css 属性，并使用 style prop 将其传递给组件 ReactTable