Question

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

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

/>

在这种情况下，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};
  `}
`;

样式化组件中的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行，以防万一这仍不是普通的样式化组件字符串）

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

1 个答案: