CSS Baseline
CSS Baseline
CssBaseline 컴포넌트는 우아하고 일관성 있으며 단순한 베이스라인을 마련해주어 그 위에 앱을 쌓을 수 있게 도와줘요.
출처: 문서
본문
전역 리셋 (Global reset)
HTML 요소와 속성의 스타일을 정규화해주는 normalize.css에 익숙할 거예요.
import * as React from 'react';
import CssBaseline from '@mui/material/CssBaseline';
export default function MyApp() {
return (
<React.Fragment>
<CssBaseline />
{/* The rest of your application */}
</React.Fragment>
);
}
자식에만 적용하기 (Scoping on children)
하지만 웹사이트를 점진적으로 Material UI로 마이그레이션하고 있다면, 전역 리셋을 쓰는 게 어려울 수 있어요. ScopedCssBaseline 컴포넌트를 사용하면 베이스라인을 자식에게만 적용할 수 있어요.
import * as React from 'react';
import ScopedCssBaseline from '@mui/material/ScopedCssBaseline';
import MyApp from './MyApp';
export default function MyApp() {
return (
<ScopedCssBaseline>
{/* The rest of your application */}
<MyApp />
</ScopedCssBaseline>
);
}
⚠️ 위 예시처럼 box-sizing 충돌을 피하려면 ScopedCssBaseline을 먼저 임포트하는지 확인하세요.
접근 방식 (Approach)
페이지 (Page)
<html>과 <body> 요소가 페이지 전반에 더 나은 기본값을 제공하도록 업데이트돼요. 구체적으로는:
- 모든 브라우저에서 margin이 제거돼요.
- 기본 Material Design 배경색이 적용돼요. 표준 기기에서는
theme.palette.background.default를, 인쇄 기기에서는 흰색 배경을 사용해요. CssBaseline에enableColorScheme이 제공되면,<html>에color-scheme을 적용해 네이티브 컴포넌트의 색이 설정돼요. 사용되는 값은 테마 프로퍼티theme.palette.mode로 제공돼요.
레이아웃 (Layout)
box-sizing이<html>요소에 전역으로border-box로 설정돼요.*::before와*::after를 포함한 모든 요소가 이 속성을 상속하도록 선언돼요. 이 덕분에 padding이나 border 때문에 요소의 선언된 너비가 넘치지 않도록 보장돼요.
스크롤바 (Scrollbars)
:::error 이 API는 deprecated 되었어요. 대신 color-scheme을 사용하는 것을 고려해보세요. :::
스크롤바 색상을 커스터마이즈해서 대비를 개선할 수 있어요 (특히 Windows에서). 이 코드를 테마에 추가하세요 (다크 모드용).
import darkScrollbar from '@mui/material/darkScrollbar';
const theme = createTheme({
components: {
MuiCssBaseline: {
styleOverrides: (themeParam) => ({
body: themeParam.palette.mode === 'dark' ? darkScrollbar() : null,
}),
},
},
});
하지만 이 유틸리티를 사용하면 (그리고 -webkit-scrollbar를 커스터마이즈하면) macOS에서 스크롤바가 항상 표시되게 된다는 점을 알아두세요.
색상 배색 (Color scheme)
이 API는 @mui/material (v5.1.0)에서 도입됐으며, color-scheme CSS 속성을 사용해 스크롤바 같은 네이티브 컴포넌트의 "light"/"dark" 모드 사이를 전환해요. 활성화하려면 아래처럼 enableColorScheme=true를 설정하면 돼요:
<CssBaseline enableColorScheme />
// or
<ScopedCssBaseline enableColorScheme >
{/* The rest of your application using color-scheme*/}
</ScopedCssBaseline>
타이포그래피 (Typography)
<html>에는 기본 font-size가 선언되지 않지만, 16px(브라우저 기본값)로 가정해요.<html>기본 font size를 바꿀 때의 영향에 대해 더 자세히 알고 싶다면 테마 문서 페이지를 참고하세요.<body>요소에theme.typography.body1스타일을 설정해요.<b>와<strong>요소에 font-weight를theme.typography.fontWeightBold로 설정해요.- Roboto 폰트를 더 잘 표시하기 위해 커스텀 font-smoothing이 활성화돼요.
커스터마이즈 (Customization)
이 컴포넌트들의 출력을 바꾸려면 문서의 global customization 섹션으로 이동하세요.