Soy nuevo en el Material de interfaz de usuario y ReactJS. He estado jugando con Crear-Reaccionar-App (CRA) y reactstrap.
Mi pregunta es, puedo utilizar el Material de interfaz de usuario y la CRA juntos para construir una aplicación?

InformationsquelleAutor Chris | 2017-05-26

1 Comentario

  1. 50

    Instalar primero material-ui

    npm install --save material-ui

    o

    yarn add material-ui

    src/App.js

    import React, { Component } from 'react';
    
    import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; //add
    import RaisedButton from 'material-ui/RaisedButton'; //add
    
    import logo from './logo.svg';
    import './App.css';
    
    class App extends Component {
      render() {
        return (
    
          <MuiThemeProvider>
    
          <div className="App">
            <div className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h2>Welcome to React</h2>
            </div>
            <p className="App-intro">
              To get started, edit <code>src/App.js</code> and save to reload.
            </p>
    
            <RaisedButton label="Material UI" />
    
          </div>
    
          </MuiThemeProvider>
    
        );
      }
    }
    
    export default App;

    En resumen, estas son las cosas que debe hacer:

    • Instalar los paquetes necesarios.

    • de importación MuiThemeProvider componente en App.js, Incluya la aplicación de div en MuiThemeProvider componente

    • Ahora puede importar y utilizar cualquier componente en material-ui como solía RaisedButton aquí

    Versiones de material-interfaz de usuario antes de 0.19.1 requiere react-tap-event-plugin

    Para esas versiones, tenía que hacer este cambio en index.js

    src/index.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    
    import injectTapEventPlugin from 'react-tap-event-plugin';   //add
    
    import './index.css';
    import App from './App';
    import registerServiceWorker from './registerServiceWorker';
    
    injectTapEventPlugin();  //add
    
    ReactDOM.render(<App />, document.getElementById('root'));
    registerServiceWorker();
    • de importación injectTapEventPlugin de react-tap-event-plugin en index.js y activa de ella. injectTapEventPlugin se utiliza con el fin de brindar
      para quitar tap delay en iOS.
    • Gracias por este. Hay una manera de que todos los componentes pueden ser utilizados sin importar ellos uno por uno?
    • Eso es bastante frecuente pregunta de la gente de introducción. Fundamentalmente, JS del módulo de paradigma está arraigada en segregados, componentes reutilizables. Ellos no son parte de un ecosistema más grande que se puede importar todos a la vez. Es un bastante gran tema para llegar a aquí, pero, en definitiva, no se puede importar todas las de la materia-interfaz de usuario en una declaración.
    • La razón de react-tap-event-plugin es sólo como una solución para iOS problema del navegador y no esenciales para el problema, ¿verdad?
    • Según el funcionario MECANISMO nacional de prevención de la página, react-tap-event-plugin no es necesario si usted está utilizando la versión 0.19.0 o superior. npmjs.com/package/material-ui#react-tap-event-plugin
    • La documentación actual (Sept. 2019) muestra a instalar con: npm install –save @material-ui/core . Con la anterior me daba errores al tratar el material de interfaz de usuario ejemplos

Dejar respuesta

Please enter your comment!
Please enter your name here