css - 使用 Prop 通过样式化的组件混合来切换宽度

Question

使用的技术 - 样式化组件和 react

我有一个 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}
  `}
`;

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