내가 만든 css 파일이라면 쉽게 변경이 가능하겠지만, 라이브러리의 css 를 건드려야하는 경우가 있을 수 있다.
이미 다음과 같은 css 모듈 파일이 있다고 하자. 이 css 가 라이브러리의 css 라고 생각을 해보자.
.App {
font-family: sans-serif;
text-align: center;
color: blue;
}
다음과 같은 화면을 볼 수 있었다.
다음처럼 createGlobalStyle 을 사용해서 styled-components 를 사용해서 css 를 적용할 수 있다.
import "./styles.css";
import { createGlobalStyle } from "styled-components";
const Global = createGlobalStyle`
.App {
color: red !important
}
`;
export default function App() {
return (
<div className="App">
<Global />
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
createGlobalStyl는 보통은 어플리케이션 레벨에서 공통적으로 주어야할 css 를 다룰때 사용하는듯 하다.
예를 들자면, body{} 에 공통적인 글꼴을 적용한다던지 말이다.
'공부기록 > 웹 개발' 카테고리의 다른 글
[eslint] Failed to load config "react-app" to extend from. (0) | 2022.09.05 |
---|---|
useCallback, useMemo, createSelector (0) | 2022.09.02 |
png 파일 색 변경하는 방법 (0) | 2022.08.31 |
조금의 sass 그리고 css module (0) | 2022.08.29 |
[웹 게임을 만들며 배우는 React] 6장 (0) | 2022.08.29 |