如何将以下样式转换为样式组件？

Question

https://stackblitz.com/edit/react-9agwom?file=index.js

我正在尝试将以下样式转换为 third party library 的样式组件。

   **Using <div className="grid"> istead of <StyledDiv> works fine.** 

  .grid table tr th,
  .grid table tr td {
    width: 100%;
  }
  .grid table tr th:nth-child(2),
  .grid table tr td:nth-child(2) {
    width: 200%;
  }


 <StyledDiv>
    <Grid
      rows={data}
      columns={columns}
    >
      <TableView />
      <TableHeaderRow />
    </Grid>
  </StyledDiv>

如何将其转换为样式化组件？我在下面尝试过，但它不起作用。

const StyledDiv = styled.div`
  color: red;

  & table tr th,
  & table tr td {
    width: 100%;
  };
  & table tr th:nth-child(2),
  & table tr td:nth-child(2) {
    width: 200%;
  }
`;

除了color:red 的样式外，我没有看到任何生成的东西。 另外，如果出现问题或调试样式组件，是否有办法获得某种编译错误？

感谢任何帮助。

Answer 1

试一试。

const StyledDiv = styled.div`
  color: red;

  table {
    tr {
      th, td {
       width: 100%; 
       &:nth-child(2) {
          width: 200%;
        }
      }
    }
  }
`;