대런대런
CodeCraft
대런대런
전체 방문자
오늘
어제
  • 분류 전체보기 (18)
    • 블록체인 (1)
    • Front-end (13)
      • Browser (2)
      • React & React Native (11)
    • Windows (4)
    • 알고리즘 (0)

블로그 메뉴

  • 홈
  • 태그
  • 미디어로그
  • 위치로그
  • 방명록

공지사항

인기 글

태그

  • 파일 안보임
  • strapi
  • edge effect
  • offsetLimitPagination
  • style overriding
  • webkit
  • react
  • 윈도우10
  • 브라우저 엔진
  • 브라우저 원리
  • react native
  • react-native-fs
  • ios 파일다운로드
  • apollo-client
  • rn-fetch-blob
  • main.jsbundle
  • local server
  • ios build
  • 앱스토어 업로드
  • web3

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
대런대런

CodeCraft

Front-end/React & React Native

React Native 컴포넌트에서 children 스타일 덮어쓰는 방법

2020. 11. 19. 20:31
반응형
export const CustomButton: FC<CustomButtonProps> = ({
  children,
  ...props
}) => {
  const childStyle = {color: '#fff'};
  const childrenWithProps = React.Children.map(children, (child) => {
    const childProps = {
      ...child.props,
      style: StyleSheet.flatten([childStyle, child.props.style]),
    };
    if (React.isValidElement(child)) {
      return React.cloneElement(child, childProps);
    }
    return child;
  });
  return (
    <Button {...props}>
      {childrenWithProps}
    </Button>
  );
};

 

반응형

'Front-end > React & React Native' 카테고리의 다른 글

[React Native] react-native-naver-map ios 빌드시 Undefined symbols for architecture x86_64: 에러  (0) 2020.12.06
React Native 이미지/동영상 갤러리(스와이프) 구현 삽질기  (4) 2020.11.26
[React] ApolloClient 캐시 비우는 간단한 방법  (0) 2020.11.19
[Strapi + React] ApolloClient로 초간단 pagination 구현하기  (0) 2020.11.18
React Native 안드로이드 스크롤 끝 이펙트(edge effect) 설정  (0) 2020.11.18
    'Front-end/React & React Native' 카테고리의 다른 글
    • [React Native] react-native-naver-map ios 빌드시 Undefined symbols for architecture x86_64: 에러
    • React Native 이미지/동영상 갤러리(스와이프) 구현 삽질기
    • [React] ApolloClient 캐시 비우는 간단한 방법
    • [Strapi + React] ApolloClient로 초간단 pagination 구현하기
    대런대런
    대런대런
    IT & 프로그래밍 관련 블로그

    티스토리툴바