React Styled Components - преобразование масштаба с помощью реквизита

Question

Я пытаюсь оформить навигационную панель и хочу, чтобы открылось переходное меню. Я пытаюсь сделать это, передавая реквизит в стилизованный компонент и затем устанавливая значение transform на основе реквизита, однако я не могу понять синтаксис для использования реквизита в стилизованном реквизите. Вот код:

<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

Вы получаете эту ошибку, потому что scale - это undefined в выражении javascript.
Вы должны написать свой CSS в виде строки в javascript expression.
, например, так:

  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-реквизита