styled-components global style

styled-components에 대해 작성해보려한다. 이때까지 mui , tailwind만 썼다가 styled-components에 대해서 적어보려한다. 이 것도 써보니 나름 좋드라 ㅎㅎ

우선 App에 ThemeProvider context를 추가해준다. 그리고 prop으로 Theme을 넘겨준다.

참고로 index.css처럼 GlobalStyle도 추가해줄 수 있다.

// styles/GlobalStyle
import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';

const GlobalStyle = createGlobalStyle`
  ${reset}
  * {
    box-sizing: border-box;
  }
  a {
  color: inherit;
  text-decoration: none;
  }
  li {
  list-style: none;
  }

  button{
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
  }
`;

export default GlobalStyle;

// styles/theme.ts

import { DefaultTheme } from 'styled-components';

const Theme: DefaultTheme = {
  colors: {
    black: '#000000',
    grey: '#D9D9D9',
    blue: '#0094FF',
    white: 'white',
  },
  border: {
    bottom: '1px solid #000000',
  },
  padding: '1.3rem',
};

export default Theme;


// App.tsx
import { ThemeProvider } from "styled-components";
import GlobalStyle from 'styles/GlobalStyle';
import Router from './Router';
import Theme from './styles/theme';

function App() {
  return (
   <ThemeProvider theme={Theme}>
       <GlobalStyle />
       <Router />
   </ThemeProvider>
 )
}  

이렇게 하고 App안에서 styled-components로 함수안에 있는 prop인자를 사용할때 Theme안에 있는 것을 쓸수 있다.

// components/carItem/style.ts
import styled from 'styled-components';

const Layout = styled.li`
  padding: 1rem 1.3rem;
  border-bottom: ${(props) =>        props.theme.border.bottom};
  a {
    display: flex;
    align-items: center;
  }
`;

클래스로 선택하고 싶을때는??

styled안에서 클래스로 선택해서 스타일을 지정하고 싶을때는 어떻게 하는가? 결론은 string template로 스타일드 컴포넌트를 불러오면 그 스타일드 컴포넌트에 지정된 클래스를 불러 올 수 있다. 아래 처럼

You can convert a styled-component to a string to retrieve it's CSS Selector:
https://github.com/styled-components/styled-components/issues/2113#issuecomment-678772604

const ImageContainer = styled.div`
    & > span {
      position: unset !important;
      img {
        height: auto !important;
        position: relative !important;
      }
    }
`

const ImageContainers = styled.div`
  padding: 0 30px;
  margin-top: 26px;

  display: flex;
  flex-direction: column;

  gap: 50px;
  ${ImageContainer} {
     ~~~
  }
`