[강의노트] styled-components

노마드코더의 무료강의 리액트 스타일? Styled Components! 강의노트 ✏️

1. GlobalStyle

import React, { Component, Fragment } from "react";
import styled, { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  body {
    padding: 0;
    margin: 0;
  }
`;

class App extends Component {
    render() {
        return (
          <Fragment>
              <GlobalStyle />
                  <Button>Hello</Button>
                  <Button danger>Hello</Button>
          </Fragment>
        );
    }
}

2. props 활용

const Button = styled.button`
    ~
    background-color: ${(props) => (props.danger ? "#e74c3c" : "#2ecc71")};
`;

3. component 재활용

• 이미 설정되어 있는 Button component를 가져와서 a component를 붙이는 것
• 스타일 추가도 가능(백틱 안에)

const Anchor = styled(Button.withComponent("a"))`
    text-decoration: none;
    font-size: 12px;
`;

4. animation

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

const Button = styled.button`
    ~
    ${(props) => {
        if (props.danger) {
            return css`
                animation: ${rotation} 2s linear infinite;
            `;
        }
    }}
`;

const rotation = keyframes`
  from{
    transform: rotate(0deg);
  } to{
    transform : rotate(360deg);
  }
`;

5. attribute 추가

const Input = styled.input.attrs({
    required: true,
})`
    border-radius: 5px;
`;

class App extends Component {
    render() {
        return (
            <Container>
                <Input placeholder="hello" />
            </Container>
        );
    }
}

6. mixin(css 그룹)

• mixin 설정

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

const awesomeCard = css`
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
    background-color: white;
    border-radius: 10px;
    padding: 20px;
`;

• mixin 적용

const Input = styled.input`
    ${awesomeCard}
`;

7. ThemeProvider

• (theme.js): 글로벌하게 사용하고 싶은 css 저장

const theme = {
    mainColor: "#3498db",
    dangerColor: "#e74c3c",
    successColor: "#2ecc71",
};

export default theme;

• (App.js)

import styled, { ThemeProvider } from "styled-components";
import theme from "./theme";

const Card = styled.div`
    background-color: pink;
`;

const Button = styled.button`
    border-radius: 30px;
    padding: 25px 15px;
    
    // theme.js에서 원하는 색 불러오는 방법❗
    background-color: ${(props) => props.theme.dangerColor};
`;

const Form = () => (
    <Card>
        <Button>Hello</Button>
    </Card>
);

class App extends Component {
    render() {
        return (
            <ThemeProvider theme={theme}>
                <Form />
            </ThemeProvider>
        );
    }
}

8. Nesting

• 만들어놓은 컴포넌트를 레퍼런스 하는 것

const Card = styled.div`
    background-color: tomato;
`;

const Container = styled.div`
    height: 100vh;
    width: 100%;
    background-color: pink;
    ${Card} {
        background-color: blue;
    }
`;