尝试导入组件但出现错误

Question

我正在创建一个Tetris游戏，并创建了一个组件（StyledDisplay），我试图导入该组件，但是我的Display.Js页面显示以下错误：

  

尝试导入错误：“ StyledDisplay”未从中导出   './styles/StyledDisplay'。

我知道这是一个非常愚蠢的问题，但是有人可以看看我如何导入和导出它吗？我相当有信心可以导出文件并以正确的方式导入它，但是新的眼睛不会受到伤害。

这就是我要导入的Display.js文件夹的位置：

import React from 'react';
import { StyledDisplay } from './styles/StyledDisplay';

const Display = ({ gameOver, text }) =>(

<StyledDisplay gameOver={gameOver}>{text}</StyledDisplay>

)
export default Display;

这是我的Display.Js文件夹的创建方式，这是我创建组件的位置：

import styled from 'styled-components';

export const StyledDisplayed = styled.div`
    box-sizzing: border-box;
    display: flex;
    align-items: center;
    margin: 0 0 20px 0;
    padding: 20px;
    border: 4px; solid #333;
    min-height: 30px;
    width: 100%;
    border-radius: 20px;
    color: ${props => (props.gameOver ? 'red' : '#999')};
    background: #000;
    font-family: Pixel, Arial, Helvetica, sans-seriff;
    font-size: 0.8rem;
`;

这是在Visual Studio Code中设置文件的方式：

Answer 1

您的导出名为StyledDisplayed，而不是StyledDisplay。

---

您似乎还有一些其他的错字，例如box-sizzing和sans-seriff。

Answer 2

将export const StyledDisplayed更改为export const StyledDisplay.

P.S。 CSS中的拼写错误可能会导致视觉效果怪异。