생활코딩: styled-components

 

 

1. styled components 설치

 

$npm install styled-components

//오류날 경우
$npm install styled-components@latest

 

2. App.js 작성

import React from "react";
import styled from 'styled-components';

const SimpleButton = styled.button`
  color:white;
  background-color:green;
`;

const LargeButton = styled(SimpleButton)`
  font-size:50px;
`;

const ReactButton = (props) => {
  console.log('props', props)
  // return <button>{props.children}</button>  //props 전달값의 클래스 네임을 넣어줘야 한다.
  return <button className={props.className}>{props.children}</button>
}

const ReactLargeButton = styled(ReactButton)`
  font-size:50px;
`;

// const PrimaryButton  = styled.button`
//   color: ${function(props){
//     console.log('#props', props)
//     if(props.primary){//true인 경우
//       return 'white';
//     }else{
//       return 'black';
//     }
//   }};
// `;

//아래에 축약한 버전

const PrimaryButton = styled.button`
  color:${(props)=>props.primary ? 'white':'black'};
  //배경색 바꾸기

  background-color: ${(props)=> props.primary ? 'blue':'gray'}
  
`;

function App() {
  return(
    <div>
      <SimpleButton>Simple</SimpleButton>
      <LargeButton>Large</LargeButton>
      <ReactButton>React</ReactButton>
      <ReactLargeButton>React Large</ReactLargeButton>
      <PrimaryButton>Normal</PrimaryButton>
      <PrimaryButton primary>Primary</PrimaryButton>
    </div>
  
  );
}

export default App;