css - 我在 React Table 单元格中找不到导致 div 边距的原因

Question

我在我的项目 React Table 中使用了一个问题，我无法找到导致屏幕宽度增大/缩小时会增大和缩小的额外边距的原因。在这里您可以看到代码中未定义的一些边距。

这就是它的渲染方式：

 <StyledTableRow
                                onClick={() =>
                                    handlePushToEditUser(
                                        row.original.id.toString()
                                    )
                                }
                                {...row.getRowProps()}
>
                                {row.cells.map((cell) => {
                                    return (
                                        <StyledTableData
                                            {...cell.getCellProps({
                                                style: {
                                                    width: cell.column.width,
                                                },
                                                className:
                                                    cell.column.className,
                                            })}
                                        >
                                            {cell.render('Cell')}
                                        </StyledTableData>
                                    );
                                })}
  </StyledTableRow>

以及这里的样式如何

export const StyledTableRow = styled.tr`
    border-bottom: ${({ theme }) => `1px solid ${theme.palette.grey[500]}`};
    align-items: center;
`;

export const StyledTableHeader = styled.th`
    padding: 0 20px;
`;

export const StyledTableData = styled.td`
    flex-direction: row;
    text-align: left;
    font-size: 13px;
    padding: 8px 20px;
    ${(props) => props.theme.breakpoints.up('sm')} {
        padding: 0 20px;
    }

    &.test {
        div {
            background-color: red;
            width: 3rem;
            margin-right: 0;
        }
    }
`;

我将非常感谢一些提示

标签： cssreactjsmarginstyled-componentsreact-table