[React] styled-components

css 오염방지 

1. styled-components 사용하기

2. 컴포넌트명.module.css -> 컴포넌트명.js 에서 import 해서 사용하면 해당 컴포넌트명.js 에만 적용됨

 

import { Container, Row, Col } from "react-bootstrap";
import { useParams } from "react-router";
import styled from "styled-components";

// porps로 사용하기
let YellowBtn = styled.button`
    background : ${ props => props.bg }; 
    color : ${ props => props.bg == 'blue' ? 'white':'black'};
    padding : 10px;
`

let Box = styled.div`
    background: grey;
    padding : 20px;
`

function Detail(props){
    // App.js 에서 넘겨준 파라미터(:id) 를 받음
    let{id} = useParams();
    if(id >= props.shoes.length){
        return <div>없는상품입니다.</div>
    }
    return(
        <div>
            <Container>
                <Box>
                    <YellowBtn bg = "blue">버튼</YellowBtn>
                    <YellowBtn bg = "pink">버튼</YellowBtn>
                </Box>
                <Row>
                    <Col md={6}>
                        <img src={"https://codingapple1.github.io/shop/shoes"+(props.shoes[id].id+1)+".jpg"} width="80%"/>
                        <h4>{props.shoes[id].title}</h4>
                        <p>{props.shoes[id].content}</p>
                        <p>{props.shoes[id].price}원</p>
                        <button className="btn btn-danger">주문하기</button>
                    </Col>                                       
                </Row>
            </Container>
        </div>
    )
   
}

export default Detail;