样式化组件中的响应式数组答案

【问题标题】：Responsive Arrays in Styled Components样式化组件中的响应式数组
【发布时间】：2020-05-05 22:15:55
【问题描述】：

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

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

这将产生以下 CSS：

.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%' }} />

它会产生相同的结果。

我想知道是否可以使用 Styled Components 做类似的事情。我的想法是这样的：

const StyledBox = styled.div`

  width: ${['100%', '50%', '25%']};
`

const OtherStyledBox = styled.div`

  width: ${{ _: '100%', md: '50%', lg: '25%' }};
`

样式化组件可以做到这一点吗？如果没有，您知道如何创建一个可以做到这一点的函数或“mixin”吗？

谢谢。

【问题讨论】：

标签： javascript reactjs styled-components css-in-js

【解决方案1】：

如果您的应用的样式“API”有 3 个媒体查询断点，那么您可以在样式组件中使用道具并返回正确的 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%'})}

  ...
`;

【讨论】：

感谢您的回复。为了清楚起见，我不想创建一个接受响应数组或对象的道具。相反，我想将数组或对象放在样式定义本身中。我不想一直写@media (min-width: ...) {...}。
@Moshe 将功能提取到实用程序中。更新以包括使用作为实用功能。希望更多地满足您的需求。
再次感谢 - 这肯定更接近。请不要觉得有义务进行另一次更新。但我正在寻找的是可以与任何 css 属性一起使用的东西。 'width'、'font-size'、'display' 等。在我看来，这仅适用于 'width' 属性。我会看看我是否可以重做它——它肯定会让我朝着正确的方向前进——谢谢:)。
@Moshe 很高兴它至少让你更接近了。这样的函数签名会更好吗？ const createMediaQueries = (cssRule: string, { sm = 'initial', md = 'initial', lg = 'initial'}) 采用（任何）规则和值对象，并为您创建媒体查询。或者您是否认为您已经拥有所有断点 AND 之前定义的规则值，例如在主题文件中，然后一个函数可能看起来像 const addMediaQueries(cssRules: string[])，它采用规则数组您想要为其创建媒体查询？

【解决方案2】：

我最终使用了 EmotionJS 库 Facepaint。使用该库，我可以执行以下操作：

const mq = facepaint([
  '@media(min-width: 480px)',
  '@media(min-width: 768px)',
  '@media(min-width: 992px)',
  '@media(min-width: 1200px)',
  '@media(min-width: 1600px)',
])

const Test = styled.div`
  background-color: orange;

  ${mq({
    width: ['10px', '25px', '50px', '100px', '200px', '400px'],
    height: ['10px', '25px', '50px', '100px', '200px', '400px'],
  })};
`

这基本上是我想做的。目前我不知道如何创建对象系统税——即：width: { _: '15px', md: '30px', xl: '100px' }。但现在已经足够了。

【讨论】：

【解决方案3】：

我构建了一个媒体查询助手，允许您将数组放入反引号中，如下所示：

mq`
    width: ${[300, 600, 900]};
    color: ${["red", "blue"]};
    background-color: white;
`

【讨论】：