Styled Components

// styled-components 라이브러리에서 import 해온 styled라는 객체를 이용합니다
// 아래와 같이 h1 태그를 만들어 Title이라는 스타일드 컴포넌트를 만들 수 있습니다

import styled from 'styled-components'

render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);

// html 태그 이름 뒤 Tagged Templete 문법을 활용해 CSS 속성을 정의하고 있습니다
// 앞서 학습했던 Templete Literals 문법(``)의 확장이라고 생각해도 좋습니다 ([링크](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals))

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

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

함수형 컴포넌트로 한 덩어리의 컴포넌트로 만들어서 넣듯이 똑같이 밑에서 스타일컴포넌트로 정의해주고 위에서 쓰는것.

<Button primary width="100"> Primary Button </Button>
<Button> Normal </Button>

const Button = styled.button`
background: ${(props) ⇒ (props.width <200 ? "white" : "black"")};
color: ${(props) => (props.primary ? "white" : "violet")}; 
`

props 를 내려줄 때 styled Component 에다가 달아줘야한다. 그 안에 있는 일반 html 태그에 붙이면 안됨!

<Container prop={1} /> 
	<div> this is title </div>
</Container>

GlobalStyles.js

import { css } from "styled-components";

export const MoveCenter = css`
  display: flex;
  align-items: center;
  justify-content: center;
`;

export const FlexRow = css`
  flex-direction: row;
`;

export const FlexCenter = css`
  display: flex;
  justify-content: center;
`;

export const Font = (name, size) => css`
  font-family: ${name};
  font-size: ${size}px;
  /* Khand, Spartan, Inconsolata */
`;

export const Theme = {
  lightBeige: "#fdf9f2",
  darkBeige: "#eee9e3",
  lightGrey: "#a9a6a0",
  mediumGrey: "#4d4d4d",
  darkGrey: "#2d2d2d",
};

styled 컴포넌트 연습!!! GlobalStyles 에 있는것을 아래와같이 import해오고,

아래서 쓸때는 아래와같이 사용하면 된다!

const Title = styled.h1`
  color: ${Theme.darkBeige};
  margin: 0.5rem;
  ${Font("spartan", 100)}
`;

import React, { Component } from "react";
import styled from "styled-components";
import Slide from "./Slide/Slide";
import GlobalStyles, {
  MoveCenter,
  Font,
  Theme,
} from "../../../Styles/GlobalStyles";

export default class ShopDetail extends Component {
  state = {
    width: 99,
  };

  changeNum = () => {
    this.setState({ width: 200 });
  };

  render() {
    return (
      <div className="shopDetail">
        {/* <Slide /> */}
        <Wapper>
          <Title>why</Title>
          <Btn width="100">이게 버튼이다</Btn>
          <Btn width={this.state.width} onClick={this.changeNum}>
            이게 next 버튼이다
          </Btn>
        </Wapper>
      </div>
    );
  }
}

const Wapper = styled.div`
  ${MoveCenter}
`;

const Title = styled.h1`
  color: ${Theme.darkBeige};
  margin: 0.5rem;
  ${Font("spartan", 100)}
`;

const Title1 = styled.h3`
  color: "red";
`;

const Btn = styled.button`
  background-color: ${function (props) {
    if (props.width > 100) {
      return "red";
    } else {
      return "yellow";
    }
  }};
`;