Current File : /home/opti/public_html/ezone-accounting.optisoft.com.ng/static/js/189.28711be0.chunk.js
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[189],{2578:function(e,t,n){"use strict";n.r(t);var s=n(118),c=n(1098),o=n(1090),a=n(194),i=n(1072),l=n(1);const r=Object(i.a)((e=>({layoutRoot:{"& .description":{marginBottom:16}}})));t.default=function(e){return r(),Object(l.jsxs)(l.Fragment,{children:[Object(l.jsx)("div",{className:"flex flex-1 flex-grow-0 items-center justify-end",children:Object(l.jsxs)(c.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/css-baseline",target:"_blank",role:"button",children:[Object(l.jsx)(o.a,{children:"link"}),Object(l.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(l.jsx)(a.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"CSS Baseline"}),Object(l.jsx)(a.a,{className:"description",children:"Material-UI provides a CssBaseline component to kickstart an elegant, consistent, and simple baseline to build upon."}),Object(l.jsx)(a.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Global reset"}),Object(l.jsxs)(a.a,{className:"mb-16",component:"div",children:["You might be familiar with"," ",Object(l.jsx)("a",{href:"https://github.com/necolas/normalize.css",children:"normalize.css"}),", a collection of HTML element and attribute style-normalizations."]}),Object(l.jsx)(s.a,{component:"pre",className:"language-jsx",children:" \nimport React from 'react';\nimport CssBaseline from '@material-ui/core/CssBaseline';\n\nexport default function MyApp() {\n return (\n <React.Fragment>\n <CssBaseline />\n {/* The rest of your application */}\n </React.Fragment>\n );\n}\n"}),Object(l.jsx)(a.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Scoping on children"}),Object(l.jsxs)(a.a,{className:"mb-16",component:"div",children:["However, you might be progressively migrating a website to Material-UI, using a global reset might not be an option. It's possible to apply the baseline only to the children by using the ",Object(l.jsx)("code",{children:"ScopedCssBaseline"})," component."]}),Object(l.jsx)(s.a,{component:"pre",className:"language-jsx",children:" \nimport React from 'react';\nimport ScopedCssBaseline from '@material-ui/core/ScopedCssBaseline';\nimport MyApp from './MyApp';\n\nexport default function MyApp() {\n return (\n <ScopedCssBaseline>\n {/* The rest of your application */}\n <MyApp />\n </ScopedCssBaseline>\n );\n}\n"}),Object(l.jsxs)(a.a,{className:"mb-16",component:"div",children:["\u26a0\ufe0f Make sure you import ",Object(l.jsx)("code",{children:"ScopedCssBaseline"})," first to avoid box-sizing conflicts as in the above example."]}),Object(l.jsx)(a.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Approach"}),Object(l.jsx)(a.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Page"}),Object(l.jsxs)(a.a,{className:"mb-16",component:"div",children:["The ",Object(l.jsx)("code",{children:"<html>"})," and ",Object(l.jsx)("code",{children:"<body>"})," elements are updated to provide better page-wide defaults. More specifically:"]}),Object(l.jsxs)("ul",{children:[Object(l.jsx)("li",{children:"The margin in all browsers is removed."}),Object(l.jsxs)("li",{children:["The default Material Design background color is applied. It's using"," ",Object(l.jsx)("a",{href:"/customization/default-theme/?expand-path=$.palette.background",children:Object(l.jsx)("code",{children:"theme.palette.background.default"})})," ","for standard devices and a white background for print devices."]})]}),Object(l.jsx)(a.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Layout"}),Object(l.jsx)("ul",{children:Object(l.jsxs)("li",{children:[Object(l.jsx)("code",{children:"box-sizing"})," is set globally on the ",Object(l.jsx)("code",{children:"<html>"})," element to"," ",Object(l.jsx)("code",{children:"border-box"}),". Every element\u2014including ",Object(l.jsx)("code",{children:"*::before"})," and"," ",Object(l.jsx)("code",{children:"*::after"})," are declared to inherit this property, which ensures that the declared width of the element is never exceeded due to padding or border."]})}),Object(l.jsx)(a.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Typography"}),Object(l.jsxs)("ul",{children:[Object(l.jsxs)("li",{children:["No base font-size is declared on the ",Object(l.jsx)("code",{children:"<html>"}),", but 16px is assumed (the browser default). You can learn more about the implications of changing the"," ",Object(l.jsx)("code",{children:"<html>"})," default font size in"," ",Object(l.jsx)("a",{href:"/customization/typography/#typography-html-font-size",children:"the theme documentation"})," ","page."]}),Object(l.jsxs)("li",{children:["Set the ",Object(l.jsx)("code",{children:"theme.typography.body2"})," style on the ",Object(l.jsx)("code",{children:"<body>"})," element."]}),Object(l.jsxs)("li",{children:["Set the font-weight to ",Object(l.jsx)("code",{children:"theme.typography.fontWeightBold"})," for the"," ",Object(l.jsx)("code",{children:"<b>"})," and ",Object(l.jsx)("code",{children:"<strong>"})," elements."]}),Object(l.jsx)("li",{children:"Custom font-smoothing is enabled for better display of the Roboto font."})]}),Object(l.jsx)(a.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Customization"}),Object(l.jsxs)(a.a,{className:"mb-16",component:"div",children:["Head to the ",Object(l.jsx)("a",{href:"/customization/globals/#global-css",children:"global customization"})," section of the documentation to change the output of these components."]})]})}}}]);
Mini Shell