스타일링(2)

1. styled-components

• https://styled-components.com/

• 원래 자바스크립트의 css 코드를 적용한다.

• 라이브러리 불러오기

import styled from 'styled-components/native

• Tagged Template Literals

  • styled.컴포넌트의 컴포넌트는 native 의 컴포넌트만을 사용하여야 한다.

    const 컴포넌트이름 = styled.컴포넌트`
    스타일코드
    `

  • 컴포넌트A의 스타일 코드를 모두 종속한다.

    const 컴포넌트이름 = styled(컴포넌트A)`
    스타일코드
    `

  • 스타일 코드 재사용

    const 스타일이름 = css`
    스타일코드
    `
    const 컴포넌트이름 = styled.컴포넌트`
    ${스타일이름}
    스타일코드
    `
    

import styled, { css } from 'styled-components/native';

// styled-components 사용
const Container = styled.View`
  flex: 1;
  background-color: #e3e3e3;
  align-items: center;
  justify-content: center;
`;

// 스타일 코드 사용
const cssText = css`
  font-size: 20px;
  font-weight: 600;
`;

// 스타일 코드 적용
const StyledText = styled.Text`
  ${cssText}
  color: blue;
`;

// 스타일 코드 상속
const ErrorText = styled(StyledText)`
  color: red;
`;

const StyledButton = styled.Button``;

export default function App() {
  return (
    <Container>
      <StatusBar style="auto" />
      <StyledText>Styled Text</StyledText>
      <ErrorText>Styled Error Text</ErrorText>
      <StyledButton title="styled" onPress={() => {}}></StyledButton>
    </Container>
  );
}

2. styled-components 활용