modification de la police de la famille de tous les documents-interface utilisateur(version 1) composants

Peut-on changer la police de caractères de la famille des matériaux-composants de l'interface utilisateur avec moins de code. J'ai essayé de nombreuses façons, mais encore, je ne peux pas en mesure de le faire. Je dois changer la famille de polices
individuellement ce qui est vraiment beaucoup de travail. Existe-il d'autres façons de le faire?

  • Nous n'avons aucune solution pour le même problème dans la version 0 du matériel de l'INTERFACE utilisateur?
InformationsquelleAutor anonymous_siva | 2018-01-18
  1. 30

    Vous pouvez modifier la police dans le matériau d'interface utilisateur@à côté de la bibliothèque de la façon suivante. Supposons que dans votre <App /> qui est définie 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 le theme prop pour MuiThemeProvider vous fournir ce qui suit, où

    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 vos principales index.html fichier inclure 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 à createMuiTheme Le Thème Par Défaut Params Concernant les docs lui-même pour changer le MuiTheme ils sont comme suit. Thèmes Matériel de l'INTERFACE utilisateur Suivante

    Concernant la <Reboot /> partie, vous pouvez jeter un oeil à la documentation ici Matériel de l'INTERFACE utilisateur Redémarrage de Détails

    • Il Fonctionne.. Mais si l'on inclut toutes les div composant nous avons besoin de changer les styles de police,droit?
    • Cela dépend, Le général de police qui, être appliquée à la totalité du Matériel composants de l'INTERFACE utilisateur peut être définie comme la façon dont je l'ai mentionné ci-dessus. Mais si vous voulez des polices personnalisées pour tous les différents div balise puis vous devez le spécifier séparément.
    • Ok. Comme mentionné ci-dessus, je peut être en mesure de changer la police de caractères de la famille. Mais il y a un autre problème. Je veux changer la couleur de fond et la couleur de la Typographie polices sur la sélection de textes de la typographie. Pouvons-nous en mesure de le faire à l'aide de Muithemeprovider?
    • Vous pouvez changer la couleur de la police, mais pas la couleur d'arrière-plan. Jetez un oeil à material-ui-next.com/customization/theme-default Si vous voulez changer la couleur d'arrière-plan, vous aurez à remplacer ce composant.
    • il fonctionne pour moi,mais j'ai eu cet avertissement : Matériel-INTERFACE utilisateur: vous utilisez le obsolète typographie variantes qui sera supprimée dans la prochaine version majeure
    • Matériel-l'INTERFACE utilisateur est la dépréciation de la vieille typographie de l'API, de sorte qu'il donne un message d'avertissement. Afin d'utiliser la dernière de la typographie. Ajouter ceci dans le typography objet. typography: { useNextVariants: true }

    InformationsquelleAutor Adeel Imran
  2. 2

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

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

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

    • Ce n'est pas de travail pour moi, quand j'essaie d'importer un local .ttf fichier. Je suis en utilisant webpack et de l'importer dans le fichier de l'élément où je suis en train de faire mon thème avec createMuiTheme et y compris dans mon ThemeProvider.
    InformationsquelleAutor TechnoTim
  3. 1

    En espérant que cela peut aider quelqu'un...vous devez être très prudent avec les virgules et les parenthèses lors de la déclaration de vos styles dans createMuiTheme

    Il est vraiment facile de ce mess up. Par exemple, la palette de couleurs est un gros objet...c'est de la typographie, assurez-vous que tout est à la bonne place. J'ai eu des problèmes causés par le fait que c'est 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",

  },
    InformationsquelleAutor Kyle Pennell