<tr> в заголовке не будет принимать стили фокуса, но <tr>в строке будет

Question

У меня очень странная проблема с использованием стилизованных компонентов. У меня есть правило стиля, которое должно применяться к <tr> элементам в фокусе:

const TableStyles = styled.table`
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  tr:focus {
    background-color: #e7f0ff;
  }
`;

Это правило работает для строк таблицы в теле таблицы, но не работает для строки таблицы в заголовке.

Что мне кажется еще более странным, так это то, что строка заголовка таблицы ДЕЙСТВИТЕЛЬНО получает фокус в моей реализации сборника рассказов и в jsfiddle. Несмотря на то, что код идентичен. Я могу сосредоточиться на строке заголовка таблицы, стили просто не обновляются.

Вот мой компонент стилизованной таблицы:

export const TABLE_DATA_MODIFIERS = {
  underline: () => `
    border-bottom: 1px solid ${basic[400]}`,
};

export const TABLE_HEAD_MODIFIERS = {
  underline: () => `
      border-bottom: 1px solid ${basic[400]};
      `,
  greyHeader: () => `
      background-color: ${basic[300]};
      `,
  darkHeader: () => `
      background-color: ${basic[700]};
      color: ${basic[100]};
      `,
  small: () => `
      background-color: ${basic[300]};
      border-bottom: 1px solid ${basic[400]};
    `,
  striped: () => `
      background-color: ${basic[300]};
  `,
};

export const TABLE_ROW_MODIFIERS = {
  small: () => `
      height: 2.375rem;
      border-bottom: 1px solid ${basic[400]};
      :nth-child(even) {
        background-color: ${basic[200]};
      };
      &:hover {
        background-color: ${basic[300]};
      };
    `,
  striped: () => `
    :nth-child(even) {
        background-color: ${basic[200]};
    };
    &:hover {
        background-color: ${basic[300]};
      };
  `,
};

export const TABLE_HEAD_ROW_MODIFIERS = {
  small: () => `
    height: 2.375rem;
    `,
};

const TableRow = styled.tr`
  height: 3.125rem;
  &:hover {
    background-color: ${basic[300]};
  }
  ${applyStyleModifiers(TABLE_ROW_MODIFIERS)};
`;

const TableHeadRow = styled.tr`
  height: 3.125rem;
  ${applyStyleModifiers(TABLE_HEAD_ROW_MODIFIERS)};
`;

const TableData = styled.td`
  font-family: ${primaryFont};
  font-size: ${typeScale.subtitle2};
  ${applyStyleModifiers(TABLE_DATA_MODIFIERS)};
`;

const TableHead = styled.th`
  text-align: left;
  font-family: ${quinaryFont};
  font-size: ${typeScale.subtitle1};
  ${applyStyleModifiers(TABLE_HEAD_MODIFIERS)};
`;

const TableHeadCheckbox = styled.th`
  ${applyStyleModifiers(TABLE_HEAD_MODIFIERS)};
`;

const TableStyles = styled.table`
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  tr:focus {
    background-color: #e7f0ff;
  }
`;

export const Table = ({
  ariaLabel,
  titles,
  data,
  modifiers,
  return (
    <TableStyles aria-label={ariaLabel} data-testid="table">
      <thead>
        <TableHeadRow
          data-testid="table-head-row"
          modifiers={modifiers}
          tabIndex="0"
        >
     
          {titles.map((title, index) => (
            <TableHead
              key={index}
              data-testid={"table-head-cell-" + index}
              modifiers={modifiers}
              scope="col"
            >
              {title}
            </TableHead>
          ))}
        </TableHeadRow>
      </thead>
      <tbody>
        {data.map((item, index) => (
          <TableRow
            data-testid={"table-body-row-" + index}
            key={index}
            modifiers={modifiers}
            tabIndex="0"
          >
            {titles.map((title, key) => (
              <TableData
                data-testid={"table-body-cell-" + index + key}
                key={key}
                modifiers={modifiers}
              >
                {item[title]}
              </TableData>
            ))}
          </TableRow>
        ))}
      </tbody>
    </TableStyles>
  );
};

Моя реализация компонента проста:

      <div style={{ width: "70%" }}>
        <Table
          ariaLabel="table of people"
          modifiers={["striped"]}
          titles={["First", "Last", "Email", "Id"]}
          data={[
            { First: "Joe", Last: "Smith", Email: "joes@gmail.com", Id: 1 },
            { First: "Tom", Last: "Smith", Email: "toms@gmail.com", Id: 2 },
            { First: "Sue", Last: "Smith", Email: "sues@gmail.com", Id: 3 },
          ]}
        />
      </div>

Почему <tr> не изменяет стиль фона в заголовке, а изменяет его в теле?