ReactJS 样式组件中的响应式道具答案

【问题标题】：Responsive Props In ReactJS Styled ComponentsReactJS 样式组件中的响应式道具
【发布时间】：2020-01-21 07:11:14
【问题描述】：

我知道如何使用 Styled Components 进行响应式道具，但我不知道如何实现它。我的想法是这样的：

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

/>

在这种情况下，color 和 bg 只是我在样式化组件中设置的道具：

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

现在，我知道如何检查 props 的 color 和 bg 了——比如，像这样：

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

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

【问题讨论】：

它只是一个字符串操作，是的，它可能
一切皆有可能，但你应该做一个更好的例子，MEDIA_QUERY_WITH_OBJECT_WITH_COLOR_AND_BG_PROPS 长什么样子？尝试显示预期的行为

标签： javascript reactjs styled-components react-props

【解决方案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)}
`;

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

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

（我添加了一些额外的 CSS 行作为示例，以防这仍然是一个普通的样式组件字符串）

【讨论】：