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%;
    }
  }
`;

只有第一组规则似乎适用于我的表。因此，填充，文本对齐和宽度似乎没有生效。这是一个有效的结构（对具有多个规则的多个元素进行分组）还是我需要为每个表元素（<td>，<td>，..等）单独创建样式化组件？

Answer 1

如果要添加全局样式，可以使用createGlobalStyle中的styled-components，然后使用它来将全局样式注入到组件中。

import { createGlobalStyle } from "styled-components"

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

设置样式表组件样式的香草html表

1 个答案: