CSS Baseline

Material-UI oferece um componente CSS Base a fim de inciar uma elegante, consistente e simples base para construção de aplicativos.

A paleta com funções de estilo.

Reset global

Você já deve estar familiarizado com normalize.css, uma coleção de elementos HTML e normas de atributos de estilo.

import * as React from 'react';
import CssBaseline from '@mui/material/CssBaseline';

export default function MyApp() {
  return (
    <React.Fragment>
      <CssBaseline />
      {/* O resto da sua aplicação */}
    </React.Fragment>
  );
}

Escopando componentes filhos

No entanto, você pode estar migrando progressivamente um site para Material-UI, usar um reset global pode não ser uma opção. É possível aplicar a baseline apenas aos filhos usando o componente ScopedCssBaseline.

import * as React from 'react';
import ScopedCssBaseline from '@material-ui/core/ScopedCssBaseline';
import MyApp from './MyApp';

export default function MyApp() {
  return (
    <ScopedCssBaseline>
      {/* O resto da sua aplicação */}
      <MyApp />
    </ScopedCssBaseline>
  );
}

⚠️ Certifique-se de importar ScopedCssBaseline primeiro para evitar conflitos de box-sizing, como no exemplo acima.

Abordagem

Página

Os elementos <html> e <body> são atualizados para fornecer melhores padrões para toda a página. Mais especificamente:

A margem é removida em todos navegadores.
A cor de fundo padrão do material design é aplicada. It's using theme.palette.background.default for standard devices and a white background for print devices.
If enableColorScheme is provided to CssBaseline, native components color will be set by applying color-scheme on <html>. The value used is provided by the theme property theme.palette.mode.

Leiaute

box-sizing é definido globalmente no elemento <html> para border-box. Todos elementos—incluindo *::before e *::after são declarados para herdar essa propriedade, que garante que a largura declarada do elemento nunca seja excedida devido ao preenchimento da borda.

Barras de rolagem

The colors of the scrollbars can be customized to improve the contrast (especially on Windows). Add this code to your theme (for dark mode).

import darkScrollbar from '@mui/material/darkScrollbar';

const theme = createTheme({
  components: {
    MuiCssBaseline: {
      styleOverrides: (themeParam) => ({
        body: themeParam.palette.mode === 'dark' ? darkScrollbar() : null,
      }),
    },
  },
});

Be aware, however, that using this utility (and customizing -webkit-scrollbar) forces macOS to always show the scrollbar.

Tipografia

This API is introduced in @mui/material (v5.1.0) for switching between "light" and "dark" modes of native components such as scrollbar, using the color-scheme CSS property. To enable it, you can set enableColorScheme=true as follows:

<CssBaseline enableColorScheme />

// or

<ScopedCssBaseline enableColorScheme >
  {/* The rest of your application using color-scheme*/}
</ScopedCssBaseline>

Typography

Nenhum tamanho de fonte base é declarado no <html>, mas 16px é assumido (o padrão do navegador). You can learn more about the implications of changing the <html> default font size in the theme documentation page.
Define o estilo theme.typography.body1 no elemento <body>.
Define o font-weight para theme.typography.fontWeightBold em elementos <b> e <strong>.
Uma customização da suavização da fonte (font-smoothing) é ativada para melhor exibição da fonte Roboto.

Customização

Head to the global customization section of the documentation to change the output of these components.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.