[ React ] styled-components

🔴  styled() : 스타일 확장

 

import styled from "styled-components";

const Box = styled.div`
  background-color: ${(props) => props.bgColor};
  width: 100px;
  height: 100px;
`;
const Circle = styled(Box)`
  border-radius: 50px;
`;

function App() {
  return (
    <>
      <Box bgColor="teal" />
      <Circle bgColor="tomato" />
    </>
  );
}

export default App;

 

🟠  as : 같은 스타일 HTML 태그 변경

 

import styled from "styled-components";

const Btn = styled.button`
  color: white;
  background-color: tomato;
  border: 0;
  border-radius: 15px;
`;

function App() {
  return (
    <>
      <Btn>Log in</Btn>  {/* <button></button> */}
      <Btn as="a" href="/">Log in</Btn>  {/* <a></a> */}
    </>
  );
}

export default App;

 

🟡  attr() : HTML 속성 공통 지정

 

import styled from "styled-components";

const Input = styled.input.attrs({ required: true })`
  background-color: tomato;
`;

function App() {
  return (
    <>
      <Input />
      <Input />
      <Input />
      <Input />
    </>
  );
}

export default App;

 

🟢  keyframes : 애니메이션

 

import styled, { keyframes } from "styled-components";

const Wrapper = styled.div`
  display: flex;
`;

const rotationAnimation = keyframes`
  0% {
    transform: rotate(0deg);
    border-radius: 0px;
  }
  50% {
    border-radius: 100px;
  }
  100% {
    transform: rotate(180deg);
    border-radius: 0px;
  }
`;

const Box = styled.div`
  width: 200px;
  height: 200px;
  background-color: tomato;
  animation: ${rotationAnimation} 1s linear infinite;
`;

function App() {
  return (
    <Wrapper>
      <Box />
    </Wrapper>
  );
}

export default App;

 

🔵  Pseudo Selectors

 

import styled from "styled-components";

const Wrapper = styled.div`
  display: flex;
`;

const Box = styled.div`
  width: 200px;
  height: 200px;
  background-color: tomato;
  display: flex;
  justify-content: center;
  align-items: center;
  // Box 내부에 있는 span 태그에 한하여 속성을 부여
  span {
    font-size: 36px;
    &:hover {
      font-size: 48px;
    }
  }
`;

function App() {
  return (
    <Wrapper>
      <Box>
        <span>⚙️</span>
      </Box>
    </Wrapper>
  );
}

export default App;

 

import styled from "styled-components";

const Wrapper = styled.div`
  display: flex;
`;

const Emoji = styled.span`
  font-size: 36px;
`;

const Box = styled.div`
  width: 200px;
  height: 200px;
  background-color: tomato;
  display: flex;
  justify-content: center;
  align-items: center;
  // Box 바깥쪽 Emoji는 hover 이벤트에 해당되지 않음
  ${Emoji}:hover {
    font-size: 100px;
  }
`;

function App() {
  return (
    <Wrapper>
      <Box>
        <Emoji>⚙️</Emoji>
      </Box>
      <Emoji>⚙️</Emoji>
    </Wrapper>
  );
}

export default App;

 

🟣  Theme

 

// [ index.js ]
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { ThemeProvider } from "styled-components";

const darkTheme = {
  textColor: "whitesmoke",
  backgroundColor: "#111",
};

const lightTheme = {
  textColor: "#111",
  backgroundColor: "whitesmoke",
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <ThemeProvider theme={darkTheme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

 

// [ App.js ]
import styled from "styled-components";

const Title = styled.h1`
  color: ${(props) => props.theme.textColor};
`;

const Wrapper = styled.div`
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background-color: ${(props) => props.theme.backgroundColor};
`;

function App() {
  return (
    <Wrapper>
      <Title>Hello</Title>
    </Wrapper>
  );
}

export default App;

🟤  Global Style

 

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
    // reset
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, menu, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    main, menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, main, menu, nav, section {
        display: block;
    }
    /* HTML5 hidden-attribute fix for newer browsers */
    *[hidden] {
        display: none;
    }
    body {
        line-height: 1;
    }
    menu, ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    * {
        box-sizing: border-box;
    }
    body {
        font-weight: 300;
        font-family: 'Your font in here';
        background-color: ${(props) => props.theme.bgColor};
        color: ${(props) => props.theme.textColor};
        line-height: 1.2;
    }
    a {
        text-decoration: none;
        color: inherit; // 바깥에 지정된 글자 색 동일하게 지정
    }
`;

export default GlobalStyle;