🌈 React 공통 컴포넌트 커스텀 CSS

게시판의 화면이다.

마이페이지에서 PIN 게시물이나 내가 쓴 게시물 UI를 일관성 있게 하기 위해

게시판의 게시글 컴포넌트를 사용하려고 한다.

 

그래서 짜잔 🤗

가져왔는데 CSS가 게시판에 맞춰져 있다 (당연)

예전에 프로젝트할 때 다른 팀원과 공통 컴포넌트를 사용하다가 내 CSS가 무너진 적이 있었다....

게시판 CSS도 지키고 나만의 CSS도 만들라면 어떻게 해야 할까?

 

 

src/mypage/components/dashboard/PinPosts.jsx

    return (
        <div className="pin_posts">
            <p className="pp_title">PIN 게시물</p>
            <div className="pp_content">
                {pinPosts.map(post => (
                    <BoardListElem key={post.boardId} board={post} customClass="custom_board_list_elem" />
                ))}
            </div>
        </div>
    );

customClass="custom_board_elem"

커스텀 CSS를 원하는 컴포넌트 <BoardListElem />에 위와 같이 적어준다.

 

src/board/components/boardList/BoardListElem

const BoardListElem = ({ board, customClass }) => {
    ...
    생략
    ...
    return (
        <div className={`boardcontent ${customClass}`} onClick={handleClick}>
        	...
            생략
            ...
        </div>
    );
}

export default BoardListElem;

공통 컴포넌트 props와 className에도 적어주고

 

src/mypage/styles/dashboard/PinPosts.css

.custom_board_list_elem {
    width: 703px;
    ...
    생략
    ...
}

.custom_board_list_elem .boardcontent_left_title {
	...
    생략
    ...
}

나만의 CSS 파일을 만들어서 원하는 데로 작성하면 ?!?

 

짜잔 🩷🩷🩷🩷

 

나만의 커스텀 컴포넌트 완성 !!