Styled-component

1. theme에서 공통 컴포넌트 설정

// index.js설정

import React from 'react';
import ReactDOM from 'react-dom/client';
import GlobalStyle from './styles/GlobalStyles';
import { ThemeProvider } from 'styled-components';
import Router from './Router';
import theme from './styles/Theme'; //theme을 가져옴

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <>
    <GlobalStyle />
    <ThemeProvider theme={theme}> // theme을 props로 내려줌
      <Router />
    </ThemeProvider>
  </>
);

// 팀원들과 사용할 공통 스타일을 theme.js에서 컴포넌트 만들어줌

const fontWeight = {
  light: 300,
  bold: 600,
};

const colors = {
  white: '#FFFFFF',
  kakaoYellow: '#FFD66C',
  kakaoBrown: '#341F20',
  lightGray: '#AEB5BC',
  gray: '#676D74',
  boldGray: '#353A3F',
  blue: '#3FA5F7',
  hoverBlue: '#4A97E6',
  underlineBlue: '#88BEF0',
};

const borders = {
  borderBox: '1px solid #AEB5BC',
};

const flex = {
  flexBox: (direction = 'row', align = 'center', justify = 'center') => `
  display: flex;
  flex-diection: ${direction};
  align-items: ${align};
  justify-content: ${justify};
  `,
};

const theme = {
  fontWeight,
  colors,
  borders,
  flex,
};

export default theme;

2. 사용방법

1) theme을 props로 사용

import React from 'react';
import styled, { css } from 'styled-components';
import theme from '../../styles/Theme'; //import 해옴

const ReservationList = () => {
  return (
    <div className="ReservationList">
      <NavLayout>여기는 Nav</NavLayout>
      <section className="ReservationListContainer"></section>
    </div>
  );
};

// 여기는 styled-component

const Navlayout = styled.div`
  width: 100%;
  margin: 20px 30px;
  background-color: #da3637;
  ${props => props.theme.flex.flexbox} // theme 중에 사용 원하는 component를 props를 사용!

// 만약 구조 분해 할당할거면   background-color: ${({ theme }) => theme.colors.gray};
`;

2) 만약 theme에 있는 component의 내용 일부를 수정하고 싶다면?

const Navlayout = styled.div`
  width: 100%;
  margin: 20px 30px;
  background-color: #da3637;
  // ${props => props.theme.flex.flexbox} theme에 있는 flexbox component 일부를 수정하면? ↓
${props => props.theme.flex.flexbox('column',_, 'start')}

// 인덱스로 인식함! theme의 해당 component는 하단 처럼 구성되어 있음
// 여기서 direction과 justify만 변경하고 싶다면?
// flexbox('수정내용',_, '수정내용') → 수정안하고 그대로 사용하고 싶은 부분은 '_'사용!

const flex = {
  flexBox: (direction = 'row', align = 'center', justify = 'center') => `
  display: flex;
  flex-diection: ${direction};
  align-items: ${align};
  justify-content: ${justify};
  `,
};

3) styled-component를 mixin 처럼 사용하기

// 먼저 css import 해서 오기
import styled, { css } from 'styled-components';

// ❈ mixin으로 사용 될 부분이 !항상! 먼저 선언되어야 함
const flexCenter = css`
  display: flex;
  justify-content: center;
  color: ${props => props.theme.colors.gray};
`;

// 그리고 사용을 원하는 component에 적용!
const NavLayout = styled.div`
  ${flexCenter};
`;

3. component 재사용

//LoginBtn이라는 styled-compnent를 background-color만 변경해서 사용하고 싶다면?
 const LoginBtn = styled.button`
   width: 100px;
   margin: 20px;
   background-color: #ffff;
 `;

// 재사용을 원하는 component에 인자값으로 LoginBtn을 주고, background-color를 원하는 값으로 적어 줌
 const KaKaoBtn = styled(LoginBtn)`
   background-color: ${props => props.theme.colors.kakaoBrown};
   height: auto; // 만약 추가로 사용하고 싶은게 있다면 같이 적어서 사용하면 됨!
 `;