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

Question

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

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

/>

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

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

现在，我知道如何检查 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};`}
`

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

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

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

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

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

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

Responsive Props In ReactJS Styled Components

javascript

reactjs

styled-components

react-props