web-dev-qa-db-fra.com

changement de famille de polices de tous les composants de material-ui (version 1)

Pouvons-nous changer la famille de polices de composants material-ui avec moins de code? J'ai essayé beaucoup de façons mais je ne peux toujours pas le faire. Je dois changer la famille de polices Individuellement, ce qui représente beaucoup de travail. Y a-t-il d'autres moyens de le faire?

reactjsmaterial-ui
9
anonymous_siva

Vous pouvez modifier la police dans la bibliothèque de matériau-ui @ next en procédant comme suit. Supposons dans votre <App /> qui est défini comme suit

// Material UI
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';

const App = () => (
  <MuiThemeProvider theme={THEME}>
    <Provider store={store}>
      <Router history={appHistory} routes={Routes} />
    </Provider>
  </MuiThemeProvider>
 );

 ReactDOM.render(<App />, document.getElementById('app'));

Dans la proposition theme pour MuiThemeProvider, vous fournissez les informations suivantes:

const THEME = createMuiTheme({
   typography: {
    "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
    "fontSize": 14,
    "fontWeightLight": 300,
    "fontWeightRegular": 400,
    "fontWeightMedium": 500
   }
});

Puis quelque part dans votre css ou votre fichier index.html principal, incluez cette @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');

Pour une liste de tous les paramètres que vous pouvez donner à createMuiThemeParamètre de thème par défaut Concernant les documents eux-mêmes pour changer le MuiTheme, ils sont comme suit. Thèmes Interface utilisateur de matériel Suivant

En ce qui concerne la partie <Reboot />, vous pouvez consulter la documentation ici Détails de l’initialisation de l’interface utilisateur matérielle

19
Adeel Imran

En espérant que cela puisse aider quelqu'un ... vous devez être très prudent avec les virgules et les crochets lorsque vous déclarez vos styles dans createMuiTheme

C'est vraiment facile de tout gâcher. Par exemple, la palette est un gros objet ... de même que la typographie, assurez-vous que tout est à la bonne place. J'ai eu des problèmes aléatoires causés en faisant cela mal.

  palette: {
    primary: {
      light: '#ff8e8c',
      main: '#ff5a5f',
      dark: '#c62035',
      contrastText: '#fff',
    },
    secondary: {
      light: '#4da9b7',
      main: '#017a87',
      dark: '#004e5a',
      contrastText: '#000',
    },
  },
  typography: {
      fontFamily: "'Montserrat', sans-serif",
      textTransform: "none",


   button: {

    textTransform: "none",

  },
1
Kyle Pennell

C'est maintenant la méthode préférée:

import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";
import { createMuiTheme } from "@material-ui/core/styles";

const theme = createMuiTheme({
  typography: {
    // Use the system font instead of the default Roboto font.
    fontFamily: [
      '-Apple-system',
      'BlinkMacSystemFont',
      '"Segoe UI"',
      'Roboto',
      '"Helvetica Neue"',
      'Arial',
      'sans-serif',
      '"Apple Color Emoji"',
      '"Segoe UI Emoji"',
      '"Segoe UI Symbol"',
    ].join(','),
  },
});


const App = () => (
  <MuiThemeProvider theme={theme}>
    {/* route container, redux container, etc... */}
  </MuiThemeProvider>
 );

 ReactDOM.render(<App />, document.getElementById('root'));

Comme indiqué ici: https://material-ui.com/customization/themes/#typography

0
TechnoTim