【问题标题】:Using props within a media query in styled component在样式化组件的媒体查询中使用道具
【发布时间】:2021-10-29 06:11:43
【问题描述】:

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

    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};
      `};
      }

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

【问题讨论】:

    标签: javascript reactjs styled-components


    【解决方案1】:

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

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

    ...其他代码

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2022-01-04
      • 2023-03-10
      • 2023-03-22
      • 2020-04-14
      • 2019-10-11
      • 1970-01-01
      • 1970-01-01
      • 2019-10-31
      相关资源
      最近更新 更多