reactjs - example - materialize npm

¿Cómo usar materialize-css con React?

Question

Tengo un proyecto Meteor / React, usando módulos ES6. He instalado materialize-css usando npm, pero no estoy seguro de cómo usar realmente las clases Materialize en mi código JSX. ¿Qué se supone que debo importar de materialize-css? ¿O solo tengo que incluir el CSS en mi archivo index.html principal?

Lo quiero principalmente para el sistema de grillas, ya que usaré material-ui para los componentes reales de UI.

Answer 1

Hay posibles maneras en que puedo recomendar su uso:

1. Una forma es simplemente incluir su archivo de hoja de estilo en index.html y usar la propiedad className en sus componentes React así como así.

       var myDivElement = <div className="foo" />;
       ReactDOM.render(myDivElement, document.getElementById(''example''));

2. Otra forma es agrupar todas las hojas de estilo en un archivo de hoja de estilo y usarlas como la anterior.

3. Una opción podría ser usar el paquete web. Al usar el paquete web, es posible usar hojas de estilo incrustadas en archivos jsx simplemente requiriendo la hoja de estilo que desea incluir.

   require("./stylesheet.css")

   Para examinar en detalle la opción de hoja de estilo de paquete web: http://webpack.github.io/docs/stylesheets.html

4. También vea el repositorio de nombres de clases de JedWatson para el uso de className condicional. https://github.com/JedWatson/classnames

Answer 2

Puede copiar en la carpeta "imports" y agregar

import ''../imports/stylesheets/materialize.min.css'';

o usa esto para un MENOR ejemplo

@import ''{}npm-package-name/stylesheets/...'';

Answer 3

Puede usar https://react-materialize.github.io/#/ , por qué reinventar la rueda.

instalación react-materialize

npm instalar react-materialize

Uso

import {Button, Icon} from ''react-materialize''

export default () => (
  <Button waves=''light''>
    <Icon>thumb_up</Icon>
  </Button>
)

Muestra

https://github.com/hiteshsahu/react-materializecss-template

Captura de pantalla