ts에서 styled components reset, import없는 반응형

설치

npm install styled-components @types/styled-components

reset 설치

npm install styled-reset

reset 파일 만들기

src/styles/global-styles.ts

import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';

const GlobalStyle = createGlobalStyle`
  ${reset}
  * {
    box-sizing: border-box;
  }
  body{
    background-color: #ffffff;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  input, button {
    background-color: transparent;
    border: none;
    outline: none;
  }
  h1, h2, h3, h4, h5, h6{
    font-family:'Maven Pro', sans-serif;
  }
  ol, ul, li {
    list-style: none;
  }
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
`;

export default GlobalStyle;

써주기.

반응형

src/styles/theme.ts

import baseStyled, { css, CSSProp, ThemedStyledInterface } from 'styled-components';

const sizes: { [key: string]: number; } = {
	mobile: 320,
	tablet: 768,
	desktop: 1024
};

type BackQuoteArgs = string[];

interface Media {
	mobile: (...args: BackQuoteArgs) => CSSProp | undefined,
	tablet: (...args: BackQuoteArgs) => CSSProp | undefined,
	desktop: (...args: BackQuoteArgs) => CSSProp | undefined,
}

const media: Media = {
	mobile: (...args: BackQuoteArgs) => undefined,
	tablet: (...args: BackQuoteArgs) => undefined,
	desktop: (...args: BackQuoteArgs) => undefined
};

Object.keys(sizes).reduce((acc: Media, label: string) => {
	switch (label) {
		case 'desktop':
			acc.desktop = (...args: BackQuoteArgs) => css`@media only screen and (min-width: ${sizes.desktop}px) {${args}}`;
			break;
		case 'tablet':
			acc.tablet = (...args: BackQuoteArgs) => css`@media only screen and (max-width: ${sizes.desktop}px) and (min-width: ${sizes.tablet}px) {${args}}`;
			break;
		case 'mobile':
			acc.mobile = (...args: BackQuoteArgs) => css`@media only screen and (max-width: ${sizes.tablet}px) {${args}}`;
			break;
		default:
			break;
	}
	return acc;
}, media);

const colors = {
	white: '#ffffff',
	black: '#000000'
};

const secondaryColors = {};
const fontSizes: string[] = [];

const theme = {
	colors,
	fontSizes,
	secondaryColors,
	media
};

export type Theme = typeof theme;
export const styled = baseStyled as ThemedStyledInterface<Theme>;
export default theme;

또,

src/styles/themed-components.ts 생성

import * as styledComponents from 'styled-components';

import { Theme } from './theme';

const {
	default: styled,
	css,
	keyframes,
	ThemeProvider
} = styledComponents as styledComponents.ThemedStyledComponentsModule<Theme>;

export {
	css,
	keyframes,
	ThemeProvider
};

export default styled;

위에 설정한 테마에 대한 타입을 덮어쓰기 했다.

적용

루트의 index.tsx에

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import GlobalStyle from './styles/global-styles';
import theme from './styles/theme';
import { ThemeProvider } from './styles/themed-components';

ReactDOM.render(
    <>
        <GlobalStyle/>  
        <ThemeProvider theme={theme}>
            <App />
        </ThemeProvider>
    </>, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

여기서 ThemeProvider는 단일 자식만 있어야 한다.
GlobalStyle의 설정의 경우 컴포넌트 가장 위에 위치 시켜줘야 모든 컴포넌트에 적용된다.

끝!