Прописал стили в отдельном компоненте, подключил его к MyModule, затем уже MyModule подключил к App.js, однако, стили не применились. Как это исправить?
MyModal.module.css:
.myModal {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: none;
background: rgba(0, 0, 0, 0.5);
}
.myModalContent {
padding: 25px;
background: white;
border-radius: 16px;
min-width: 250px;
}
.myModal.active {
display: flex;
justify-content: center;
align-items: center;
}
MyModal.jsx:
import React from "react";
import cl from "./MyModal.module.css";
const MyModal = ({ children }) => {
return (
<div className={[cl.myModal, cl.active].join("")}>
<div className={cl.myModalContent}> {children} </div>
</div>
);
};
export default MyModal;
App.js
import React, { useState, useRef, useMemo } from "react";
import ClassCounter from "./components/ClassCounter";
import Counter from "./components/Counter";
import PostItem from "./components/PostItem";
import PostList from "./components/PostList";
import "./styles/app.css";
import MyButton from "./components/UI/button/MyButton";
import MyInput from "./components/UI/input/MyInput";
import PostForm from "./components/PostForm";
import MySelect from "./components/UI/select/MySelect";
import PostFilter from "./components/PostFilter";
import MyModal from "./components/UI/MyModal/MyModal";
function App() {
const [posts, setPosts] = useState([
{ id: 1, title: "dsfsdf", body: "6464" },
{ id: 2, title: "cvbcvb", body: "978" },
{ id: 3, title: "vbnvbn", body: "333" },
]);
const [filter, setFilter] = useState({ sort: "", query: "" });
const sortedPosts = useMemo(() => {
if (filter.sort) {
return [...posts].sort((a, b) =>
a[filter.sort].localeCompare(b[filter.sort])
);
}
return posts;
}, [filter, posts]);
const sortAndSearchedPosts = useMemo(() => {
return sortedPosts.filter((post) =>
post.title.toLocaleLowerCase().includes(filter.query.toLocaleLowerCase())
);
}, [filter.query, sortedPosts]);
function createPost(newPost) {
setPosts([...posts, newPost]);
}
//Получаем пост из дочернего компонента
function removePost(post) {
setPosts(posts.filter((p) => p.id !== post.id));
}
return (
<div className="App">
<MyModal>
<PostForm create={createPost} />
</MyModal>
<hr style={{ margin: "15px 0" }} />
<PostFilter filter={filter} setFilter={setFilter} />
<PostList
remove={removePost}
posts={sortAndSearchedPosts}
title="JS posts"
/>
</div>
);
}
export default App;