React ThemeProvider

1. ThemeProvider

styled-components에서 ThemeProvider를 이용해 공통스타일 속성 관리할 수 있다.

하위 자식의 모든 컴포넌트는 <ThemeProvider> 의 props로 넘어가는 theme 값을 사용할 수 있게된.

   <ThemeProvider theme={themeRTL}>
        <CssBaseline />
        {layout === "dashboard" && (
          <>
            <Sidenav
              color={sidenavColor}
              brand={(transparentSidenav && !darkMode) || whiteSidenav ? brandDark : brandWhite}
              routes={routes}
              onMouseEnter={handleOnMouseEnter}
              onMouseLeave={handleOnMouseLeave}
            />
            <Configurator />
            {/* Context API 활용한 태마 변경 */}
            {configsButton}
          </>
        )}
        {layout === "vr" && <Configurator />}
        <Routes>
          {getRoutes(routes)}
          <Route path="*" element={<Navigate to="/" />} />
        </Routes>
        {/* Dialog popup 전역으로 등록해 두기 */}
        <DialogPopup />
      </ThemeProvider>

2. MUI ThemeProvider

 

3. reset -css

margin 0, padding 0의 의미 :

브라우저마다 default padding 값과, default margin 값이 다 다르다. 그렇기 때문에 내가 설정한 CSS가 모든 브라우저에서 동일하게 보이게 하기 위해 padding과 margin 값을 0으로 초기화 하는 것이다. 이렇게 0으로 초기화 한 후 다시 padding 값과 margin 값을 설정하면 어느 브라우저에서 보이더라도 동일하게 보일 수 있다.