Стиль ванильного HTML-таблицы реагирует со стилем-компонентами

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