web-dev-qa-db-fra.com

Comment utiliser materialize-css avec React?

J'ai un projet Meteor/React, utilisant des modules ES6. J'ai installé materialize-css en utilisant npm, mais je ne sais pas comment utiliser réellement les classes Materialise dans mon code JSX. Qu'est-ce que je suis censé importer de materialize-css? Ou dois-je simplement inclure le CSS dans mon fichier index.html principal?

Je le veux surtout pour le système de grille, car je vais utiliser material-ui pour les composants de l'interface utilisateur.

reactjsnpmmaterializematerial-ui
21
ffxsam

Depuis que j'utilise les modules CSS, importer css materialize le porterait à ce composant particulier. Alors j'ai fait ce qui suit

Étape 1) installer matérialiser

npm install materialize-css@next

Étape 2) dans index.html

<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/css/materialize.min.css">

Étape 3) importer le matériel dans le composant dont il a besoin

par exemple dans SomeComponent.js (par exemple, s'il s'agit d'un sidenav)

import React from 'react';
import M from 'materialize-css';
....
// ref can only be used on class components
class SomeComponent extends Component {
  // get a reference to the element after the component has mounted
  componentDidMount(){
    M.Sidenav.init(this.sidenav);
  }

  render(){
    return (
      <ul className={this.props.classes}
          ref={ (sidenav) => {this.sidenav = sidenav} }
          id={this.props.id}>
        // menuItems
      </ul>
    )
  }
}

juste un débutant, alors j'apprécierais tout commentaire sur les inconvénients de cette méthode

13
supi

Avec NPM:

Étape 1: Installer se matérialiser

Si vous utilisez npm, assurez-vous d'installer Materialise à l'aide de la commande répertoriée dans leur documentation: 

npm install materialize-css@next

NE MANQUEZ PAS le '@nex t' à la fin. La version installée sera quelque chose comme: "^ 1.0.0-rc.2" OR "^ 1.0.0-alpha.4"

Étape 2: Importer matérialiser:

import 'materialize-css/dist/css/materialize.min.css'

import M from 'materialize-css/dist/js/materialize.min.js'

OR

import 'materialize-css/dist/css/materialize.min.css'

import M from 'materialize-css'

Pour que l'importation css fonctionne, vous avez besoin d'un chargeur de css. Notez que ce chargeur est déjà inclus dans les projets construits avec create-react-app, vous n'avez donc pas besoin des étapes suivantes. Si vous utilisez plutôt la configuration Webpack personnalisée, exécutez:

npm install --save-dev style-loader css-loader

Ajoutez maintenant css-loader et style-loader dans la configuration webpack

const path = require("path");

module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "bundle.js",
        path: path.join(__dirname, "build")
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["env", "react"]
                    }
                }
            }
        ]
    }
}

Vous pouvez maintenant initialiser les composants individuellement ou tous en même temps avec M.AutoInit ();

Avec CDN:

Ajoutez ce qui suit dans votre fichier HTML.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

Ensuite, dans la configuration du webpack, ajoutez des externes: https://webpack.js.org/configuration/externals/

5
Coding Elements

Vous pouvez copier dans le dossier "imports" et ajouter par

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

ou utilisez ceci pour MOINS exemple

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

Ces réponses ne répondaient pas à ma plus grande préoccupation, à savoir la taille de l'ensemble et l'importation d'une tonne de code afin d'utiliser quelques composants. J'ai écrit une solution ici qui inclut le fractionnement de code et une étape de compilation facile.

Les points clés sont:

  1. Compiler les fichiers JS de base (il y en a 4)
  2. Assurez-vous que le JS de base est inclus avant l'exécution de votre programme d'import/bundle
  3. Modifiez les importations CSS en fonction de vos besoins
  4. Exécutez materialize.scss via votre bundler s’il prend en charge Sass ou exécutez l’étape de compilation pour obtenir un fichier css minifié.
  5. Importer des composants individuels et les activer manuellement

Lisez le post pour plus de détails.

0
mattdlockyer