Styled-Components 정리

다른 파일에서 styled-components 정의하고 컴포넌트에서 가져다 쓰기.

1. style 정의할 파일 생성 후 스타일 적용

// component/style/join.ts
// 1. styled import 하기
import styled from 'styled-components';

// 2. 스타일 정의하기 (다른 파일에서 사용할 거면 export 추가해주기.)
export const LoginContain = styled.div`
	position: relative;
	width: 100vw;
	height: 90vh;
	...
`

1. 사용할 컴포넌트에 가져오기

// component/join.jsx
// 1. 스타일 가져오기 
import * as S from './style/join'

// 2. 컴포넌트에 가져다 쓰기
const Join = () => {
	return (
		// 가져온 스타일 적용.
		<S.LoginContain>
			...
		</S.LoginContain>
	)
}

자주 쓰이거나 많이 겹치는 스타일 전역으로 관리하기

사이트 전체에 적용할 스타일 만들기

1. global.ts 파일을 만들어서 자주 쓰이는 스타일 만들기.

// 1. createGlobalStyle import 해주기.
import { createGlobalStyle } from 'styled-components';

// 2. 스타일 정의
const Global = createGlobalStyle`
	// 3. 사이트 내에서 전체적으로 쓰일 스타일 넣어주기.
	body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
      sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  a {
    list-style: none;
    text-decoration: none;
  }
  code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
      monospace;
  }	
`;

export default Global;

1. React 경우 root 경로에 있는 index.tsx 에 global Style을 적용시켜주기.

import React from 'react';
import ReactDOM from 'react-dom/client';
// 1. import 해주기.
import GlobalStyle from './styles/styledComponents/global';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

root.render(
  <React.StrictMode>
			// 2. 스타일 적용
      <GlobalStyle/>
      <App />
  </React.StrictMode>
);

자주 쓰이는 스타일 정의하기.

1. (내 기준) src/styles/overlapStyle.ts 생성 후 겹치는 스타일들 만들기

   • 컴포넌트 자주 쓰이는 스타일을 모아두는 것도 좋을 것 같다!

   // 1. css를 import 해주기
   import { css } from 'styled-components';
   
   // 2. 스타일 정의 ex) input에 자주 쓰일 것 같은 스타일
   // css로 정의해서 사용해주기.
   export const inputBasicStyle = css`
   	margin: auto;
   	width: 80%;
   	height: 45px;
   	border: none;
   	border-radius: 10px;
   	box-sizing: border-box;
   	margin-top: 30px;
   `

2. 사용할 컴포넌트에 적용

import styled from 'styled-components';
// 1. 정의한 스타일 가져오기. (input 스타일 가져오기)
import { inputBasicStyle } from '../../../styles/styledComponents/overlapStyle'

export const AuthInput = styled.input`
	// 2. 가져온 스타일 적용하기.
	${inputBasicStyle};
`;

media, hover 등을 styled-components 에서 적용하는 방법.

1. media query

export const BtnStyle = styled.button`
	width: 100px;
	height: 50px;
	// 기존 css랑 동일하게 적용하면 된다.
	@media screen and (max-width: 1200px){
		width: 70px;
		height: 40px;
	}
`

1. hover, active 등 action 관련

export const BtnStyle = styled.button`
	width: 100px;
	height: 50px;
	background-color: #333;
	color: #fff;
	&:hover {
		background-color: #fff;
		color: #000;
	}
`

1. first-child, last-child

export const BtnStyle = styled.button`
	width: 100px;
	height: 50px;
	background-color: #333;
	color: #fff;
	&:fist-child {
		background-color: #fff;
		color: #000;
	}
`

styled-components props 사용하기

TypeScript 같은 경우 props로 넘겨질 값들을 interface 로 타입을 정의해줘야 된다.

// 1. Component에서 props로 값 전달 (backgroundColor를 props로 전달)
<S.TodoList backgroundColor="#333" key={item?.id} />

// 2. 스타일 정의하는 부분
// 2-1. props로 받아와질 값들을 interface로 지정
interface ITodoListStyle{
	backgrondColor: string;
}
// 2-2. 스타일 props를 사용해서 지정해주기.
export const TodoList = styled.div`
	// 뒤에 세미콜론(;) 꼭꼭 넣어주기!
	background-color: ${(props: ITodoListStyle) => props.backgroundColor};
`

styled-components attr 사용하기

특정 이미지를 사용할 때 styled-components 로 alt 속성을 넣어보자.

// 스타일 적용
const MainImage = styled.img.attrs({ alt='mainImage'})`
	width: 100px;
	height: 60px;
`
// 컴포넌트
const MainImageComponent = () => {
	return (
		<MainImage src='src/image/abc.jpeg'/>
	)
}