22
votes

Que fait la classe CssBaseline?

Je me suis demandé ce que faisait la classe CssBaseline dans la bibliothèque Material-UI React, mais je n'arrive pas à trouver de réponse nulle part, et la page que j'ai liée n'explique pas beaucoup ce que fait la classe. Quelqu'un ici sait-il ce que ce composant est censé faire?

reactjs material-ui

0 commentaires

4 Réponses :

10
votes

CssBaseline est une sorte de réinitialisation css ajoutée à la <head /> de votre document. Si vous êtes familier avec des approches similaires comme normalize.css qui ajoute un style visuel par défaut aux éléments par défaut, réinitialise les remplissages, etc.

Material-UI fournit des styles de réinitialisation comme vous pouvez l'observer ici CssBasline.js principalement le box-sizing et la couleur de la police du corps et la couleur d' background - 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,
        },
      },

0 commentaires

5
votes

Les documents disent que c'est a collection of HTML element and attribute style-normalizations . Il est basé sur normalize.js , qui est une réinitialisation CSS inter-navigateurs moderne pour vos éléments HTML qui préserve certaines des valeurs par défaut.

Fondamentalement, il réinitialise votre CSS à une ligne de base cohérente. De cette façon, vous pouvez redéfinir votre document HTML afin que vous sachiez que vous pouvez vous attendre à ce que tous les éléments se ressemblent dans tous les navigateurs.

Ce que fait normalize.js, à partir du readme lié ci-dessus:

Préserve les valeurs par défaut utiles, contrairement à de nombreuses réinitialisations CSS.
Normalise les styles pour une large gamme d'éléments. Corrige les bogues et les incohérences courantes du navigateur.
Améliore la convivialité avec des modifications subtiles.
Explique ce que fait le code à l'aide de commentaires détaillés.

0 commentaires

0
votes

Relatif à - mais je n'arrive pas à trouver de réponse nulle part. Vous pouvez trouver le code pour CssBaseLine dans le référentiel de la bibliothèque Material-UI sur Github en suivant le lien .

0 commentaires

0
votes

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();

Fondamentalement, le MUI fournit MuiCssBaseline qui remplace certains de nos styles CSS. Mais MUI offre la possibilité de remplacer son style par défaut. Voici ce que j'ai implémenté

1: Créez un theme.js et importez createMuiTheme. Remplacez ensuite les styles de MuiBaseline en fonction de vos besoins et exportez le thème.js.

2.Si vous voulez le style remplacé dans toute votre application, importez le thème.js, MuiThemeProvider de material-ui / core / styles dans votre index.js, MuiThemeProvider prend le thème comme argument puis applique le style à ses composants enfants.

0 commentaires