Maison >interface Web >js tutoriel >Qu'est-ce que Material-UI dans React

Qu'est-ce que Material-UI dans React

coldplay.xixi
coldplay.xixioriginal
2020-11-27 09:31:103730parcourir

Material-UI dans React est une bibliothèque de composants React qui implémente le cadre d'interface d'interface utilisateur de style Material Design de Google. Il s'agit également de l'un des premiers ensembles d'outils d'interface utilisateur React. Il peut être utilisé pour créer rapidement une interface d'application agréable.

Qu'est-ce que Material-UI dans React

Material-UI est une bibliothèque de composants React permettant d'implémenter le cadre d'interface utilisateur de style Material Design de Google. C'est également l'un des premiers ensembles d'outils d'interface utilisateur pour React. Utilisez-le pour créer rapidement une interface d’application agréable.

Comment installer Material-UI ?

// 安装material-ui
npm  install  @material-ui/core
// 安装material  icons
npm  install  @material-ui/icons

Utilisation de démarrage rapide

Les composants Material-UI sont indépendants et autonomes, et n'injectent que les styles requis par le composant actuel lors du travail. Ces composants Material-UI ne reposent sur aucune feuille de style globale, bien que Material-UI fournisse le composant facultatif CssBaseline.

import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@material-ui/core/Button';  // 导入Button组件
function App() {
  return (
    <Button variant=&#39;contained&#39; color=&#39;primary&#39;>按钮</Button>
  );
}
ReactDOM.render(<App />, document.querySelector(&#39;#app&#39;));

Prise en charge des composants

Bien que Materail-UI s'efforce de suivre les directives actuelles, il ne s'attend pas à prendre en charge chaque composant ou chaque fonctionnalité d'un composant. Materail-UI espère fournir un ensemble d'éléments de base et d'expériences qui aident les développeurs à créer des interfaces utilisateur convaincantes.

Recommandations d'apprentissage gratuites associées : javascript (vidéo)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn