使用 react-bootstrap 组件对 table 中的单元格进行样式化

Question

我正在渲染一个 table，其中每个单元格对应于 react-bootstrap.

的一个 Button 组件

<>
        <Table borderless className='below-nav table-style' responsive="sm">
            
            <tbody>
                {Array.from({ length: rows }).map((_, row_index) => (
                    <tr key={row_index}>
                        {Array.from({ length: columns }).map((_, column_index) => (
                            <Button className="td-style button-style"  variant="warning">
                            <td  key={column_index}>
                                ciao
                            </td>
                            </Button>
                        ))}
                    </tr>
                ))}
            </tbody>
        </Table>
    </>

问题是它呈现的按钮没有用所选颜色实现：variant="warning"，但只有边框是那种颜色。还有一个问题：每个单元格的底部边框根本没有渲染，所以很明显有些东西覆盖在其他东西上但我不知道为什么。

CSS这样好像不行:

.table-style {
  border-collapse: separate;
  border-spacing: 1px ;
  border-width: 1px;
}

.td-style {
  margin: 5px ;
}

Answer 1

您正在用 <Button> 包装 <td>，这不是使用 table 的正确方法。它应该是这样工作的：

<>
        <Table responsive="sm">
            
            <tbody>
                {Array.from({ length: rows }).map((_, row_index) => (
                    <tr key={row_index}>
                        {Array.from({ length: columns }).map((_, column_index) => (
                            <td  key={column_index}>
                              <Button variant="warning">
                                ciao
                              </Button>
                            </td>
                            
                        ))}
                    </tr>
                ))}
            </tbody>
        </Table>
    </>

tablehttps://codesandbox.io/s/serene-knuth-qhpuu?file=/src/App.js

的基本演示

使用 react-bootstrap 组件对 table 中的单元格进行样式化

Styling cells in table with react-bootstrap components

css

reactjs

react-bootstrap

react-table

react-component