javascript - ReactJS 样式组件中的响应式 Prop

Question

我知道如何使用样式化组件制作响应式 Prop ，但我不知道如何实现它。我的想法是这样的:

<MyComponent 
  sm={{color: 'red', bg: 'green', }}
  md={{color: 'yellow', bg: 'orange' }}

/>

在这种情况下，color 和 bg 只是我在样式组件中设置的 Prop :

我的想法是，我有一个用于特定媒体查询的顶级 Prop ，并且在其中我有一个充满 Prop 的对象，其值是我想在该媒体查询中设置的 Prop 。

现在，我知道如何检查颜色和背景的属性——即，像这样:

const MyComponent = styled.div`
  ${props => props.color && `color: ${props.color};`}
  ${props => props.bg && `background-color: ${props.bg};`}
`

但是我有可能做这样的事情吗:

const MyComponent = styled.div`
  ${props => props.sm &&  MEDIA_QUERY_WITH_OBJECT_WITH_COLOR_AND_BG_PROPS}
  ${props => props.md && MEDIA_QUERY_WITH_OBJECT_WITH_COLOR_AND_BG_PROPS};`}
`

或者有什么方法可以做到这一点？

Answer 1

您可以继续使用您已有的组件:

<MyComponent 
  sm={{color: 'red', bg: 'green', }}
  md={{color: 'yellow', bg: 'orange' }}
/>

并这样定义它:

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

const MyComponent = styled.div`
  ${props => props.sm && css`
    color: ${props.sm.color};
    background-color: ${props.sm.bg};
  `}
  ${props => props.md && css`
    color: ${props.md.color};
    background-color: ${props.md.bg};
  `}
`;

Styled Components 中的 css 方法实际上可以在这里省略，但是当您像这样创建 CSS 字符串时应该始终使用它，因为该方法将确保所有插值都像在任何其他方法中一样工作样式组件。另外，如果没有它，您可能无法在编辑器中突出显示语法。

由于这里有一些重复的逻辑(将 CSS 对象转换为 CSS 字符串)，我们可以将该行为提取到一个单独的函数中:

const objectToCss = (style) => style && css`
  color: ${style.color};
  background-color: ${style.bg};
`;

const MyComponent = styled.div`
  ${props => objectToCSS(props.sm)}
  ${props => objectToCSS(props.md)}
`;

最后一个只是我的个人喜好，我喜欢只在样式化组件的顶部获取 Prop 一次，而不是每次都这样做:

const MyComponent = styled.div(({ sm, md }) => css`
  position: absolute;
  ${objectToCSS(sm)}
  ${objectToCSS(md)}
  border-width: 1px;
`);

(我添加了一些额外的 CSS 行作为示例，以防不清楚这仍然是一个普通的 Styled Components 字符串)