Reactjs 样式化组件：将道具传递给另一个组件

我正在尝试使用TypeScript和样式化组件构建一个网格组件。我在网格文件夹中有以下文件：

• index.tsx
• Cell.tsx

我想要达到的目标 网格（

index.tsx

）有一个可以设置为

边距的道具（
檐槽
）。我希望能够将此道具向下传递到
Cell.tsx
，并在这种情况下输出不同的CSS

index.tsx
我知道这不是它的工作原理，但我还没有找到一种从家长那里传递道具的方法

我在谷歌上搜索了几个小时，什么也没找到，因此，如果您想让我走上正确的轨道，您将非常感激。
猜测您可能希望使用与默认值不同的类名称
className
类似于
classes
。猜测您可能想要使用与默认
className
不同的类名。
import * as React from "react";
import styled, { css } from "styled-components";

import { Cell } from "./Cell";

export { default as Cell, ICellProps } from "./Cell";

export interface IGridProps {
  className?: string;
  /** Grid items */
  children: any;
  /** Grid gutters */
  gutters?: "padding" | "margin" | "none";
}

export const Grid = styled.div<IGridProps>`
  ${p => p.gutters !== "none" && css`
    margin-right: -1rem;
    margin-left: -1rem;
  `}

  ${p => p.gutters === "padding" && css`
    & > ${Cell} {
      padding-right: 1rem;
      padding-left: 1rem;      
    }
  `}

  ${p => p.gutters === "margin" && css`
    & > ${Cell} {
      margin-right: 1rem;
      margin-left: 1rem;
    }
  `}
`;

export default ({
  className,
  children,
  gutters = "none",
}: IGridProps) => (
  <Grid
    className={className}
    gutters={gutters}
  >
    {children}
  </Grid>
);

import * as React from "react";
import styled, { css } from "styled-components";

import { IGridProps } from "./";

interface ICell {
  s: number;
  offset?: number;
}

export interface ICellProps extends IGridProps {
  className?: string;
  children: any;
  sm?: ICell;
  md?: ICell;
  lg?: ICell;
}

const calcWidth = (size: number) => `${(size / 12) * 100}%`;

export const Cell = styled.div<ICellProps>`
  flex: 0 0 auto;

  min-width: 0;
  width: 100%;
  min-height: 0;

  ${p => p.sm && css`
    @media screen and (min-width: 0) {
      margin-left: ${p.sm.offset && calcWidth(p.sm.offset)};
      width: ${p.gutters === "margin" ? `calc(${p.sm.s && calcWidth(p.sm.s)} - 2rem)` : (p.sm.s && calcWidth(p.sm.s))};
    }
  `}
`;

export default ({
  className,
  children,
  sm,
  md,
  lg,
}: ICellProps) => (
  <Cell
    className={className}
    sm={sm}
    md={md}
    lg={lg}
  >
    {children}
  </Cell>
);

width: ${p.gutters === "margin" ? `calc(${p.sm.s && calcWidth(p.sm.s)} - 2rem)` : (p.sm.s && calcWidth(p.sm.s))};