javascript - 在样式化组件的媒体查询中使用道具

Question

我有这段代码，我想在媒体查询后使用道具，请参见下面的代码。

    export const Box = styled.div<IBox>`
      position: relative;
      min-height: 1px;

      ${({ column }) => FlexBasis(column)};
      ${({ display = "flex" }) => Display[display]};
      margin: ${({ margin }) => margin};
      padding: ${({ padding }) => padding};

      /**
      * This part below is the problem
      * margin gives error as type any
      /*
      ${media.mobile`
      margin: ${({ margin }) => margin};
      `};
      }

我的问题是如何在媒体查询中使用道具。

标签： javascriptreactjsstyled-components

Answer 1

好吧，我刚刚发现这行得通，唯一的问题是必须一直重复它

/**
* This part below is the problem
* margin gives error as type any
/*

...其他代码

${media.mobile`
margin: ${({ margin }: IBox) => margin};
`};