CssBaseline 클래스의 역할은 무엇입니까?
Material-UI React 라이브러리의 CssBaseline 클래스가 무엇을 하는지 궁금했는데, 어디에서도 답을 찾을 수 없고, 제가 링크한 페이지도 클래스가 무엇을 하는지 별로 설명해주지 않습니다.이 부품이 어떤 역할을 하는지 아는 사람 있나요?
CssBaselineCSS 리셋이 추가되어 있습니다.<head />를 참조해 주세요.normalize.css와 같은 접근법에 익숙한 경우 기본 요소에 기본 시각적 스타일링을 추가하고 패딩을 재설정하는 방법 등이 있습니다.
Material-UI는 주로 CssBasline.js에서 볼 수 있듯이 몇 가지 리셋 스타일을 제공합니다.box-sizing본문 글꼴 색상과background색.
'@global': {
html: {
WebkitFontSmoothing: 'antialiased', // Antialiasing.
MozOsxFontSmoothing: 'grayscale', // Antialiasing.
// Change from `box-sizing: content-box` so that `width`
// is not affected by `padding` or `border`.
boxSizing: 'border-box',
},
'*, *::before, *::after': {
boxSizing: 'inherit',
},
'strong, b': {
fontWeight: 'bolder',
},
body: {
margin: 0, // Remove the margin in all browsers.
color: theme.palette.text.primary,
...theme.typography.body2,
backgroundColor: theme.palette.background.default,
'@media print': {
// Save printer ink.
backgroundColor: theme.palette.common.white,
},
},
의사가 그러는데a collection of HTML element and attribute style-normalizations이것은 normalize.js에 기초하고 있습니다.이것은 HTML 요소에 대한 최신 크로스 브라우저 CSS 리셋으로 디폴트의 일부를 유지합니다.
기본적으로 CSS는 일관된 기준선으로 리셋됩니다.이렇게 하면 HTML 문서를 다시 정렬하여 모든 브라우저에서 모든 요소가 동일하게 나타날 수 있습니다.
normalize.js는 위의 링크된 readme에서 다음 작업을 수행합니다.
- 많은 CSS 리셋과는 달리 유용한 기본값을 유지합니다.
- 다양한 요소의 스타일을 정규화합니다.버그 및 일반적인 브라우저 불일치를 수정합니다.
- 미묘한 변경으로 조작성이 향상됩니다.
- 상세한 코멘트를 사용한 코드의 기능에 대해 설명합니다.
import { createMuiTheme } from "@material-ui/core/styles";
const theme = createMuiTheme({
overrides: {
MuiCssBaseline: {
"@global": {
"*, *::before, *::after": {
boxSizing: "content-box",
},
body: {
backgroundColor: "#fff",
},
},
},
},
});
export default theme;
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter } from "react-router-dom";
import { MuiThemeProvider } from "@material-ui/core/styles";
import theme from "./Theme/Theme";
ReactDOM.render(
<MuiThemeProvider theme={theme}>
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
</MuiThemeProvider>,
document.getElementById("root")
);
serviceWorker.unregister();기본적으로 MUI는 일부 CSS 스타일을 오버라이드하는 MuiCssBaseline을 제공합니다.그러나 MUI는 기본 스타일을 재정의할 수 있는 유연성을 제공합니다.다음은 제가 구현한 내용입니다.
1: teme.js를 만들고 createMuiTheme를 Import합니다.그런 다음 요건에 따라 MuiBaseline 스타일을 덮어쓰고 teme.js를 내보냅니다.
2. 어플리케이션 전체에 덮어쓰기 스타일을 원하는 경우 material-ui/core/styles의 teme.js, MuiThemeProvider를 index.js로 Import합니다.MuiThemeProvider는 테마를 인수로 사용하여 해당 스타일을 하위 컴포넌트에 적용합니다.
관련 - 하지만 어디에서도 답을 찾을 수 없는 것 같습니다.CssBaseLine 코드는 Github의 Material-UI 라이브러리 저장소에서 다음 링크를 통해 찾을 수 있습니다.
컴포넌트 상단에 배치함으로써 머티리얼 UI 어플리케이션에 많은 기본 스타일링을 제공하므로 컴포넌트의 기본 스타일에 대해 걱정할 필요가 없습니다.
언급URL : https://stackoverflow.com/questions/57058299/what-does-the-cssbaseline-class-do
'programing' 카테고리의 다른 글
| React의 레스트 소품용 TypeScript 회피책 (0) | 2023.02.22 |
|---|---|
| 카테고리별 최신 투고를 표시하는 드롭다운 네비게이션 메뉴 (0) | 2023.02.22 |
| 리액트 훅을 사용한 초기 상태로 리셋 (0) | 2023.02.22 |
| React에서 .map()을 사용하는 경우의 빈 배열 처리 (0) | 2023.02.22 |
| JSON을 사용하여 개체 직렬화/비직렬화 사전.그물 (0) | 2023.02.22 |