[React] Styled Components 실습

기존 App.js 

import "./styles.css";

export default function App() {
  return <button id="practice">Practice!</button>;
}

 

 

기존 CSS

* {
  margin: 0.5rem;
}

#practice {
  padding: 1rem;
  font-size: 2rem;
  background: powderblue;
  border-radius: 1rem;
  transition: 0.5s;
}

#practice:hover {
  background: cornflowerblue;
  color: white;
  transition: 0.5s;
}

 

 

Styled Components로 작성 시

import styled from "styled-components"
import {createGlobalStyle} from "styled-components"


const Button = styled.button`
  padding: 1rem;
  font-size: 2rem;
  background: powderblue;
  border-radius: 1rem;
  transition: 0.5s;
  // 호버 시
  &:hover{
  background: cornflowerblue;
  color: white;
  transition: 0.5s;
  }
}
  `;


const GlobalStyle = createGlobalStyle`
button {
  margin: 0.5rem;
}
`


export default function App() {
  return (
    <>
    <GlobalStyle />
    <Button>Practice!</Button>
    </>
  )
}