React样式组件-使用道具变换比例

Question

我正在尝试设计一个导航栏的样式，我想要一个菜单来过渡打开。我试图通过将一个prop传递给带样式的组件，然后根据该prop设置transform的值来实现这一点，但是我看不出在带样式的prop中使用prop的语法。代码如下：

<MenuContainer display={showMobileMenu ? '' : 'none'}>
  <UL>
    <LI><A showMobileMenu={showMobileMenu} href="#">Sign in with Github</A></LI>
    <LI><A showMobileMenu={showMobileMenu} href="#">New Snippet</A></LI>
  </UL>
</MenuContainer>
.
.
.
const MenuContainer = styled.nav`
  position: absolute;
  text-align: right;
  top: 100%;
  background: ${colors.headerBackground};
  width: 100%;
  display: ${props => props.display};
  transform: ${props => props.display === 'none' ? scale(1,1) : scale(1,0)};
  transform-origin: top;
  transition: transform 500ms ease-in-out;
`;

React抱怨说“规模没有定义no-undef”。

Answer 1

出现此错误是因为javascript表达式中的scale为undefined。

你必须在javascript expression中把CSS写成一个字符串。

例如：

  transform: ${props => props.display === 'none' ? `scale(0.7)` : `scale(1,1)`};

我在代码沙箱中为您提供了一个简单的代码：https://codesandbox.io/s/musing-dirac-tb08v

更多资源：

https://www.styled-components.com/docs/basics#adapting-based-on-props

Answer 2

与这个问题相关，在尺度内使用道具就像这样。

transform: ${props => `scale(${props.width}, ${props.height})`};