react css 생활코딩 styled components

https://www.youtube.com/watch?v=j-JxASock0Q 

 

npm install styled-components@5

 

src-App.js--------------------

import React, { Children } 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 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){
//       return 'white';
//     } else {
//       return 'black';
//     }
//     return 'blue';
//   }};
// `;

const PrimaryButton = styled.button`
  color: ${props => props.primary ? 'white' : 'black'};
  background-color: ${props => props.primary ? 'blue' : 'gray'};
`;

const 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;