"React Usecontext -Fehler: Die Eigenschaften von NULL können nicht lesen (lesen Sie 'usecontext')" ⇐ CSS

[Anonymous]

Ich begegne einen Fehler in meiner React-Anwendung, während ich versuche, gestyledige Komponenten zu verwenden. Die Fehlermeldung, die ich empfange />http://localhost:3000/static/js/bundle.js:3958:58
...
Ich verwende den Usecontext in meinem Code nicht direkt, also bin ich ein bisschen verwirrt darüber, warum dieser Fehler auftritt. Ich war gerade dabei, Stilkomponenten in mein Projekt einzubeziehen, als dieses Problem begann. < /P>
import styled from 'styled-components';

export const GlobalStyle = styled.body`
background-color: #22254b;
`;

export const AppContainer = styled.div`
display: flex;
flex-wrap: wrap;
justify-content: center;
`;

export const MovieContainer = styled.div`
width: 250px;
margin: 16px;
background-color: #373b69;
color: white;
border-radius: 5px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
`;

export const MovieImage = styled.img`
max-width: 100%;
`;

export const MovieInfo = styled.div`
display: flex;
padding: 20px;
justify-content: space-between;
align-items: center;
`;

export const MovieTitle = styled.h4`
margin: 0;
`;

export const MovieInfoText = styled.span`
margin-left: 3px;
`;

< /code>
import React from "react";
import { MovieContainer, MovieImage, MovieInfo, MovieTitle, MovieInfoText } from "./Movie.style";
const IMG_BASE_URL = "https://image.tmdb.org/t/p/w1280/";

export default function Movie(props) {
return (



{props.title}
{props.vote_average}


);
}
< /code>
import Movie from "./components/Movie";
import { movies } from "./movie";
import { GlobalStyle, AppContainer } from "./components/Movie.style";

function App() {
return (



{movies.results.map((item) => {
return (

);
})}



);
}

export default App;

< /code>
I would appreciate any insights or guidance on how to resolve this issue. Thank you!
I just wanted to change the css code using styled-components.