React Study 003

React 스타일링

import styled from "styled-components";

const Title = styled.h1 `
	font-size: 1.5rem;
    text-align: center;
    color: red;
`;

export default function App() {
	return <Title>Hello World</Title>
}

• npm i styled-components 설치
• Title 변수에 스타일이 적용된 h1 태그를 선언하는 방식
• styled components는 export하는 함수 아래쪽에서 한꺼번에 처리하는 경우가 많음

const Button = styled.button`
	font-size: 1em;
    margin: 1em;
    padding: 0.25em 1em;
    border: 2px solod red;
    border-radius: 3px;
    background: ${props => props.primary ? "yellow" : "white"};
    color: ${props => props.primary ? "white" : "yellow"};
`;

export default function App() {
	return (
    <div>
    	<Button>Normal Button</Button>
        <Button primary>Primary Button</Button>
    </div>
    )
 }

• primary는 true 값 설정
• 3항 연산자를 통해 styled component props 활용
• scss 문법 사용 가능