TIL: Styled-Components, Typescript 에서 props로 style - 220623

Global Style

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

const GlobalStyle = createGlobalStyle`
  ${reset}
  /* 
  * {
    box-sizing: border-box;
  }
  body{
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  }
  div {
    box-sizing: border-box;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
`;

export default GlobalStyle;

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ApolloProvider client={client}>
      <GlobalStyle />
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </ApolloProvider>
  );
}

export default MyApp;

props로 style

interface HomeProps {
  backgroundColor: string;
}

  <HomeAsideDiv backgroundColor="skyblue">
    <nav>
	    <ul>
    		<li>전체 태그</li>
		</ul>
	</nav>
</HomeAsideDiv>
const HomeAsideDiv = styled.div<HomeProps>`
  background-color: ${(props) => props.backgroundColor};
  height: 300px;
  border-radius: 2px;
  margin: 20px 0;
  padding: 12px;
`;