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

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

你会尝试吗：

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

Answer 2

您可以使用的另一种方式，在我看来，阅读起来会更清晰，因此可维护性如下：

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

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

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

Use props to switch width using styled components mixins

css

mixins

media-queries

reactjs

styled-components