Question

在样式系统中，它们具有Responsive Props。例如：

await foreach

这将产生以下CSS：

<Box width={['100%', '50%', '25%']} />

或者，可以使用以下语法：

.Box-hash {
  width: 100%;
}

@media screen and (min-width: 40em) {
  .Box-hash {
    width: 50%;
  }
}

@media screen and (min-width: 52em) {
  .Box-hash {
    width: 25%;
  }
}

它将产生相同的结果。

我想知道是否可以对样式化组件执行类似的操作。我的想法是这样的：

<Box width={{ _: '100%', md: '50%', lg: '25%' }} />

使用样式化组件可以吗？如果没有，是否知道如何创建可以做到这一点的功能或“ mixin”？

谢谢。

Answer 1

如果您应用的样式“ API”要具有3个媒体查询断点，则可以在样式组件中使用props并返回正确的CSS。指定所需的API，即<StyledBox width={{ _: '100%', md: '50%', lg: '25%' }} />。

import styled, { css } from 'styled-components';

const StyledBox = styled.div`
  ${props => props.width && css`
    width: ${width._};

    @media screen and (min-width: 40em) {
      width: ${width.md};
    }

    @media screen and (min-width: 52em) {
      width: ${width.lg};
    }
  `}
`;

StyledBox.propTypes = {
  width: PropTypes.shape({
    _: PropTypes.string.isRequired,
    md: PropTypes.string.isRequired,
    lg: PropTypes.string.isRequired,
  }),
};

StyledBox.defaultProps = {
  width: {
    _: '100%',
    md: '50%',
    lg: '25%'
  }
};

样式组件css helper函数

用法：

<StyledBox>
  This gets default media breakpoints, 100%, 50%, 25%
</StyledBox>

<StyledBox
  width={{ _: '90%', md: '80%', lg: '70%'}}
>
  This gets overridden media breakpoints, 90%, 80%, 70%
</StyledBox>

更新

如果您不想每次都不写出媒体查询，请将其分解为样式实用程序函数，以用于要响应的任何其他样式化组件。

const mediaQueries = ({ sm = '100%', md = '50%', lg = '25%'}) => css`
  width: ${sm};

  @media screen and (min-width: 40em) {
    width: ${md};
  }

  @media screen and (min-width: 52em) {
    width: ${lg};
  }
`;

然后在任何样式的组件中导入和使用

const ResponsiveDiv = styled.div`
  ...

  ${mediaQueries()}

  ...
`;

const CustomResponsiveDiv = styled.div`
  ...

  ${mediaQueries({ _: '90%', md: '80%', lg: '70%'})}

  ...
`;

Answer 2

我构建了一个媒体查询助手，允许您将数组放入这样的反引号中：

$data = Filesizes::where('FileType', $fileType)->get();

if ($data->count() > 0) {
    Uploads::create($dataToInsert);
} else {
    return response()->json(['status'=>'Failed']);
}

了解更多： https://github.com/hadiab/styled-easy-mq

样式化组件中的响应数组

2 个答案: