javascript - 试图在反应中为门户呈现一个按钮并得到这个错误：× TypeError: Object(...) is not a function on the modalwrapper style

Question

我创建了一个门户来显示一条消息。来编译时，我在 ModalWrapper 上遇到错误，无法弄清楚。所有技术都已安装并且是最新的。我以不同的方式导入和导出似乎可以弄清楚。

import React, { Component, Fragment } from 'react';
import styled from 'styled-components';
import  Portal  from './Portal';
import  absolute  from './elevation';
import  Card  from './Card';
import { Transition, animated } from 'react-spring/renderprops';





export default class Modal extends Component {
    render() {
      const { children, toggle, on } = this.props;
      return (
        <Portal>
          <Transition
                    native
                    config={{
                    tension: 100,
                    friction: 15
                   }}
                    items={on}
                    from={{ opacity: 0, bgOpacity: 0, y: -50 }}
                    enter={{ opacity: 1, bgOpacity: 0.6, y: 0 }}
                    leave={{ opacity: 0, bgOpacity: 0, y: 50 }}
              >
          {on => on && ((styles) => (
            <ModalWrapper>
          <ModalCard styles={{ 
            transform: 
            styles.y.interpolate(y => `translate3d(0, ${y}, 0)`),
            ...styles }}>
            <CloseButton onClick={toggle}>
              <p>H</p>
            </CloseButton>
            <div>{children}</div>
          </ModalCard>
          <Background  style={{ opacity: styles.bgOpacity.interpolate(bgOpacity => bgOpacity) }} onClick={toggle} 
/>
            </ModalWrapper>
          ))}      
          </Transition>
        </Portal>

      );
    }
  }

const ModalWrapper = styled.div`
  ${absolute({})};
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
   align-items: center;
`;

Answer 1

const ModalWrapper = styled.div`
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
   align-items: center;
`;