전역 스타일 만들고 적용 / GlobalStyle

createGlobalStyle 설치하기

npm i styled-components

 

 

 

전역적으로 적용하고 싶은 스타일 작성하기

// GlobalStyles.jsx
import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
 html,
body {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
  border:none
}

`;

export default GlobalStyle;

 

 

 

작성한 글로벌 스타일을 App에 불러와서 작성하기

//App.js
import GlobalStyle from "./styles/GlobalStyles";
import Home from "./pages/home"

const App = () => {
  return (
    <>
      <GlobalStyle /> // 이 밑에 작성하면 된다
      <Home />
    </>
  );
}

export default App;