在带样式的React组件中为table、tr、th和td元素添加边框，可以通过CSS样式来实现。以下是一种常见的方法：

1. 首先，在React组件的CSS文件中定义一个类或选择器，用于设置表格元素的边框样式。例如：

.table-style {
  border-collapse: collapse;
}

.table-style th,
.table-style td {
  border: 1px solid black;
  padding: 8px;
}

1. 在React组件的JSX代码中，将表格元素包裹在一个具有该类名的容器元素中。例如：

import React from 'react';
import './Table.css';

const Table = () => {
  return (
    <div className="table-style">
      <table>
        <thead>
          <tr>
            <th>Header 1</th>
            <th>Header 2</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Data 1</td>
            <td>Data 2</td>
          </tr>
          <tr>
            <td>Data 3</td>
            <td>Data 4</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
};

export default Table;

1. 在上述代码中，<div className="table-style">用于包裹整个表格，并应用了之前定义的CSS类名。这样，表格的<th>和<td>元素就会应用定义的边框样式。

这种方法可以为表格的每个单元格添加相同的边框样式。如果需要为特定的表格元素添加不同的边框样式，可以在CSS中使用更具体的选择器或类名来实现。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云官网：https://cloud.tencent.com/
• 云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
• 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
• 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
• 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
• 移动开发平台（MPS）：https://cloud.tencent.com/product/mps
• 云存储（COS）：https://cloud.tencent.com/product/cos
• 区块链服务（BCS）：https://cloud.tencent.com/product/bcs
• 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe