如何将CSS子类及嵌套规则转换为Styled Component写法

styled-components 原生支持嵌套选择器语法，你可以直接把原CSS中属于.table的所有子级规则写在Table组件的样式模板字符串中，和你之前用CSS Module的效果完全一致，不需要额外修改组件结构。

完整实现代码 #

1. 定义Styled Table组件

import styled from 'styled-components';

const Table = styled.table`
  width: 100%;
  text-align: left;
  border-collapse: collapse;

  /* 对应原 .table tr:nth-child(even) 规则 */
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }

  /* 对应原 .table th 规则 */
  th {
    background-color: #72a0c1;
    color: white;
    padding: 4px 4px 4px 8px;
  }

  /* 对应原 .table td 规则 */
  td {
    border: 1px solid #ddd;
    padding-left: 8px;
  }
`;

2. 组件中直接调用

function Component() {
  return (
    <Table>
      <tr>
        <td>blah</td>
        <td>blah</td>
        <td>blah</td>
      </tr>
      <tr>
        <td>blah</td>
        <td>blah</td>
        <td>blah</td>
      </tr>
      <tr></tr>
    </Table>
  );
}

补充说明 #

• 上述写法中所有嵌套的子选择器，都会自动挂载到Table组件生成的唯一类名下，和你原CSS的嵌套规则逻辑完全等价
• 如果后续有子组件样式复用的需求，也可以单独抽离Th、Td等子级Styled组件，但当前场景下直接嵌套写规则是最简便的实现方式

内容的提问来源于stack exchange，提问作者Notorious776