css - 样式化 vanilla html 表格以与样式组件 react

Question

我的应用程序中有一个具有以下结构的常规 HTML 表格(值不重要):

  <table>
    <tr>
      <th>Header Row 1</th>
      <th>Header Row 2</th>
    </tr>
    {Object.values(someArray).map((value, index) => {
      return (
        <tr>
          <td>{value.1}</td>
          <td>{value.2}</td>
          <td>{value.3}</td>
        </tr>
      );
    })}
  </table>

我正在尝试解决拥有 .css 的问题规则被全局应用，因为我希望不同的表具有不同的样式规则。

所以我开始实现 styled-components . 这是我想出来的

const CustomTable = styled.table`
  &&& {
    table,
    th,
    td {
      border: 1px solid black;
      border-collapse: collapse;
    }
    th,
    td,
    tr {
      padding: 5px;
    }
    th {
      text-align: left;
    }
    table {
      width: 100%;
    }
  }
`;

似乎只有第一组规则适用于我的表。所以padding、text-align、width好像都没有生效。这是一个有效的结构(对具有多个规则的多个元素进行分组)还是我需要为每个表格元素( <td> 、 <td> 、.. 等)单独创建样式组件？

Answer 1

如果您想添加全局样式，您可以使用 styled-components 中的createGlobalStyle 并将全局样式注入(inject)您的组件。

import { createGlobalStyle } from "styled-components"

像这样，我更新了@deve 的代码。 Codesandboxlink