webentwicklung-frage-antwort-db.com.de

schriftfamilie aller Komponenten von material-ui (Version 1) ändern

Können wir die Schriftfamilie von material-ui-Komponenten mit weniger Code ändern? Ich habe viele Möglichkeiten ausprobiert, kann es aber trotzdem nicht. Ich muss die Schriftfamilie Einzeln ändern, was wirklich viel Arbeit bedeutet. Gibt es andere Möglichkeiten, dies zu tun?

reactjsmaterial-ui
9
anonymous_siva

Sie können die Schriftart in der Bibliothek material-ui @ next folgendermaßen ändern. Nehmen Sie an, in Ihrem <App />, der wie folgt definiert ist

// 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'));

In der Variable theme für MuiThemeProvider geben Sie Folgendes an

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

Dann irgendwo in Ihrer css oder Ihrer index.html-Hauptdatei diese @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');

Für eine Liste aller Parameter können Sie createMuiThemeDefault Theme Params die Dokumente selbst zum Ändern der MuiTheme selbst angeben. Themes Material UI Weiter

In Bezug auf den <Reboot />-Teil können Sie sich die Dokumentation hier ansehen Material UI Reboot Details

19
Adeel Imran

In der Hoffnung, dass dies jemandem helfen kann ... müssen Sie beim Deklarieren Ihrer Stile in createMuiTheme mit Kommas und Klammern sehr vorsichtig sein

Es ist wirklich leicht, das durcheinander zu bringen. Zum Beispiel ist die Palette ein großes Objekt ... ebenso wie die Typografie. Stellen Sie sicher, dass alles an der richtigen Stelle ist. Ich hatte zufällige Probleme, die durch falsch gemacht wurden.

  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

**** UPDATES *****

Hinzufügen zu der akzeptierten Antwort von Adeel.

Für die neuesten Material-UI (v4 +) -Komponenten wurden die Importe sowie MuiThemeProvider geändert.

Führen Sie nun in Ihrem App.js Folgendes aus:

import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import './Styles/App.css';

const theme = createMuiTheme({
  typography: {
    fontFamily: [
      'Nunito',
      'Roboto',
      '"Helvetica Neue"',
      'Arial',
      'sans-serif'
    ].join(','),
  }
});

class App extends Component {
  render() {
    return (
      <ThemeProvider theme={theme}>
        <div className="App">
          <MainApp />
        </div>
      </ThemeProvider>
    );
  }
}

export default App;

Jetzt habe ich zum Beispiel die Schriftart Nunito hinzugefügt. Also musste ich dasselbe wie folgt zum App.css (Der in App.js Importiert wird) hinzufügen:

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Nunito Regular'), local('Nunito-Regular'), 
   url(https://fonts.gstatic.com/s/nunito/v11/XRXV3I6Li01BKofINeaBTMnFcQ.woff2) 
   format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, 
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, 
    U+2215, U+FEFF, U+FFFD;
}
0
Ankush Raghuvanshi

Dies ist jetzt die bevorzugte Methode:

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

Wie hier angegeben: https://material-ui.com/customization/themes/#typography

0
TechnoTim