[TIL] 2021/11/12

kimyoungyin·2021년 11월 12일
0

[TIL] Today I Learned

목록 보기
1/2

부모 opacity가 자식 컴포넌트에 적용 안되려면?

  1. 용도: modal에서 부모의 backdrop
  2. 주의: 부모에서 적용하려는 opacity가 배경인 경우만 가능
  3. 사용법 in CSS
    • opacity: X
    • rgba: 0

부모에서 css 예시

/* 이렇게 말고 */
background-color:black;
opacity: 0.7;

/* 이렇게! */
background-color: rgba(0, 0, 0, 0.7);

부모 이벤트가 자식에 전파되지 않도록 하려면?

  1. 용도: modal에서 부모의 backdrop을 클릭했을 때만 이벤트 발생하도록(onClick)
  2. 사용법 in React: event.stopPropagation()

부모에서 React 예시

<StyledBackDrop
	onMouseEnter={onMouseEnter}
    	onMouseLeave={onMouseLeave}
    	onClick={onMouseLeave}
>
	<Card onClick={(event) => event.stopPropagation()} radius={12}>
    	{/* 자식까지 onClick 전파 안되게 */}
        {children}
    </Card>
</StyledBackDrop>
profile
꾸준히, 그리고 정직하게 성장하는 프론트엔드 개발자

0개의 댓글