728x90
반응형

styled-component 3

styled-components 에러해결 : DefaultTheme 형식에 속성이 없습니다

✔️ 문제상황 공식문서에서 시키는대로 theme.ts를 만들고 그걸 활용하려고 하는데 아래와 같이 DefaultTheme 형식에 colors 속성이 없다고 한다. 아...네... 이것이 모두 typescript를 쓴 제 잘못입니다... 애증의 tsc ✔️ 해결하기 root 디렉토리에 styled.d.ts라는 파일을 만들고 theme.ts의 형식을 DefaultTheme이라는 이름으로 지정해준다. typescript에서 지양하는 any를 쓴 건 눈감고 지나가주세요~ // styled.d.ts import 'styled-components'; // styled-components안에 들어있는 DefaultTheme 형식 지정해주기 declare module 'styled-components' { export..

Styled-Components로 React Native Pressable 꾸미기

React Native의 기본 StyleSheet를 활용할 때에는 아래와 같이 이 pressed 되었을 때를 꾸밀 수 있다 [ styles.submit, Platform.OS === 'ios' && pressed && styles.submitPressed, ]} android_ripple={{color: '#42a5f5'}} onPress={onPress}> 회원가입 const styles = StyleSheet.create({ submit: { marginTop: 24, backgroundColor: '#2196f3', height: 56, borderRadius: 4, alignItems: 'center', justifyContent: 'center', }, submitPressed: { opacit..

styled-component로 ScrollView에서 alignItems 중간정렬하기

React Native ScrollView에서 중앙정렬하기 내가 하고 싶었던 것은 가로로 Scroll할 수 있는 영역을 설정하고, 그 속에 있는 컴포넌트들이 중앙에 위치한 형태를 만들고 싶었다. 하나도 안 어렵지 하면서 아래와 같이 align-itmes를 중앙으로 설정했는데 에러가 발생했다. import React from 'react'; import Styled from 'styled-components/native'; const Container = Styled.ScrollView` flex-direction: row; align-items: center; `; 문제해결 : attrs() 활용 이 때에는 import React from 'react'; import Styled from 'styled-..

728x90
반응형