Question

使用过的技术-带有样式的组件并做出反应

我有一个mixin可以使我的应用程序具有响应性

import { css } from 'styled-components';

export default {
  smallScreen: (...args: any) => css`
    @media (max-width: 600px) {
      ${css(...args)}
    }
  `,
}

在另一个react组件中，我想使用上面定义的方法来编写应用于小屏幕的CSS。

const SideNavWrapper = styled.article`
  background: red; // this works
  width: ${props => props.expanded ? '260px' : '80px'}; // this works

  ${media.smallScreen({
    background: 'yellow', // this works
    width: `${props => props.expanded ? '100%' : '20px'}`, // this doesn't work. props is undefined.
  })}
`;

取决于props.expanded，我想切换SideNavWrapper的宽度。但是，它不适用于较小的屏幕。背景颜色按预期变化，但宽度不变。在调试时，我意识到props是未定义的。有什么想法我想念的吗？非常感谢！

Answer 1

您可以使用的另一种方法，我认为它更易于阅读，因此可维护，如下所示：

const getCorrectWidth = ({ expanded }) => (
  expanded
    ? 260
    : 80
);

const getCorrectSmallWidth = ({ expanded }) => (
  expanded
    ? '100%'
    : '20px'
);

const SideNavWrapper = styled.article`
  background: red;
  width: ${getCorrectWidth}px;

  ${media.smallScreen`
    background: yellow;
    width: ${getCorrectSmallWidth}
  `}
`;

以上内容具有明确的功能，可以告诉开发人员他们在做什么。语法看起来也很干净。

Answer 2

您会尝试：

${props => {
return (media.smallScreen({
  background: 'yellow', 
  width: `${props.expanded ? '100%' : '20px'}`,
}))
}}

使用道具通过样式化的组件mixin切换宽度

2 个答案: