react table——如何仅为列标题设置背景色

Question

我正在使用react表实用程序为我的表通电，如下所示。

1  import {useTable} from 'react-table'
2  import {useMemo} from 'react'
3  import {Table } from 'react-bulma-components'
4
5  export default function DataTable(props) {
6
7    const data = useMemo(() => {
8     return props.products
9    },[props.products])
10
11    const columns = useMemo(() => ([
12      {
13        Header: "Image",
14        accessor: "imageUrl",
15        Cell: ({value}) => <img src={value} width={50}/>,
16        maxWidth: 50
17      },
18      {
19        Header: "Product Name",
20        accessor: "name"
21      },
22      {
23        Header: "M.R.P",
24        accessor: "price"
25      },
26      {
27        Header: "Suggested Selling Price",
28        accessor: "onSalePrice"
29      }
30    ]), [])
31
32
33    const tableInstance = useTable({columns, data })
34
35    const  {
36      getTableProps,
37      getTableBodyProps,
38      headerGroups,
39      rows,
40      prepareRow
41    } = tableInstance;
42
43    return <Table className='is-fullwidth' {...getTableProps()}>
44      <thead>
45        {headerGroups.map((headerGroup,) => (
46          <tr {...headerGroup.getHeaderGroupProps()}>
47            {headerGroup.headers.map((column) => (
48              <th {...column.getHeaderProps()}> {column.render("Header")} </th>
49            ))}
50          </tr>
51        ))}
52      </thead>
53      <tbody {...getTableBodyProps()}>
54        {rows.map((row) => {
55          prepareRow(row)
56          return (
57            <tr {...row.getRowProps()}>
58            {row.cells.map(cell =>{
59              return (
60                <td {...cell.getCellProps()}> {cell.render('Cell') } </td>
61              )
62              })}
63            </tr>
64          )
65        })}
66      </tbody>
67      </Table>
68  }

由于我是react表的新手，我还不知道如何在不给列值着色的情况下用背景色呈现列标题。

Answer 1

在此处检查此代码

https://codesandbox.io/s/silent-fog-yprqd4?file=/src/App.js

th {
background-color: red;
}

th标签使用样式变量进行样式设置