it-swarm.com.de

Wie verwende ich materialise-css mit React?

Ich habe ein Meteor/React-Projekt mit ES6-Modulen. Ich habe materialise-css mit npm installiert, aber ich bin mir nicht sicher, wie ich die Materialize-Klassen in meinem JSX-Code verwenden soll. Was soll ich von materialise-css importieren? Oder muss ich nur das CSS in meine Hauptdatei index.html aufnehmen?

Ich möchte es meistens für das Rastersystem haben, da ich material-ui für die eigentlichen UI-Komponenten verwenden werde.

21
ffxsam

Da ich CSS-Module verwende, würde das Importieren von materialise css diese Komponente betreffen. Also habe ich folgendes gemacht

Schritt 1) ​​Materialize installieren

npm install [email protected] 

Schritt 2) in 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">

Schritt 3) Importieren Sie materialise.js in die von ihr benötigte Komponente

für z.B. in SomeComponent.js (z. B. wenn es sich um ein Sidenav handelt)

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>
    )
  }
}

nur ein Anfänger, daher würde ich mich über Kommentare zu den Nachteilen dieser Methode freuen

13
supi

Es gibt verschiedene Möglichkeiten, die ich empfehlen kann:

  1. Eine Möglichkeit besteht darin, Ihre Stylesheet-Datei einfach in index.html aufzunehmen und die className -Eigenschaft in Ihren React -Komponenten auf diese Weise zu verwenden.

        var myDivElement = <div className="foo" />;
        ReactDOM.render(myDivElement, document.getElementById('example'));
    
  2. Eine andere Möglichkeit besteht darin, alle Ihre Stylesheets in einer Stylesheet-Datei zu bündeln und wie zuvor zu verwenden.

  3. Eine Möglichkeit könnte sein, Webpack zu verwenden. Mit Webpack können Sie eingebettete Stylesheets in JSX-Dateien verwenden, indem Sie nur ein Stylesheet benötigen, das Sie einschließen möchten.

    require("./stylesheet.css")

    So überprüfen Sie die Webpack-Stylesheet-Option im Detail: http://webpack.github.io/docs/stylesheets.html

  4. Siehe auch JedWatsons Klassennamen-Repository für die bedingte Verwendung von Klassennamen. https://github.com/JedWatson/classnames
6
burakhan alkan

Mit NPM:

Schritt 1: Materialize installieren

Wenn Sie npm verwenden, stellen Sie sicher, dass Sie materialize mit dem in der Dokumentation aufgeführten Befehl installieren: 

npm install [email protected] 

Verpassen Sie nicht das '@nex t' am Ende. Die installierte Version sieht etwa so aus: "^ 1.0.0-rc.2" OR "^ 1.0.0-alpha.4"

Schritt 2: Import materialize:

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'

Damit der css-Import funktioniert, benötigen Sie einen css loader. Beachten Sie, dass dieser Loader bereits enthalten in Projekten ist, die mit create -react-app erstellt wurden, sodass Sie nicht die nächsten Schritte benötigen. Wenn Sie stattdessen eine benutzerdefinierte Webpack-Konfiguration verwenden, führen Sie Folgendes aus:

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

Fügen Sie nun in der Webpack-Konfiguration css-loader und style-loader hinzu

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"]
                    }
                }
            }
        ]
    }
}

Jetzt können Sie Komponenten einzeln oder alle auf einmal mit M.AutoInit () initialisieren.


Mit CDN:

Fügen Sie Folgendes in Ihre HTML-Datei ein.

<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>

Fügen Sie dann in der Webpack-Konfiguration Externe hinzu: https://webpack.js.org/configuration/externals/

5
Coding Elements

Es gibt verschiedene Möglichkeiten, Materialise CSS in ReactJS zu verwenden. Ich verwende jedoch immer die folgende einfachste.

Hier können Sie Materialise CSS-Klassen genau wie Ihre HTML-Site verwenden, indem Sie nur ClassName mit Tags verwenden.


1) Installieren Sie Materialise CSS for ReactJS mit NPM.

npm install [email protected] 

2) Importieren Sie anschließend die minimierte Materialize-CSS-Datei in die Datei index.js.

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

3) Wenn Sie jetzt Google-Symbole verwenden möchten, fügen Sie die folgenden Codes in Ihre public/index.html -Datei ein.

<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

4) Fügen Sie die folgenden Codes in Ihre public/index.html -Datei ein, um Javascript-Ereignisse für Eingabeformulare oder andere Stellen zu verwenden.

 <!-- Compiled and minified JavaScript -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

N.B. => Da alle Dateien die Datei index.js durchlaufen müssen, reicht es aus, das minimierte Materialise-CSS einmal in index.js zu importieren. Andernfalls müssen Sie diese CSS-Dateien in alle Ihre js-Dateien importieren.


Dies reicht aus, um Ihren ReactJS-Ordner für die Verwendung von Materialise CSS vorzubereiten.


4
IFTEKHAR I ASIF

Sie können https://react-materialize.github.io/#/ verwenden, um das Rad neu zu erfinden.

installation react-materialize 

npm install reagieren materialisieren

Verwendungszweck

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

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

Probe

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

Bildschirmfoto

 enter image description here

4
Hitesh Sahu

Sie können in den Ordner "Importe" kopieren und hinzufügen

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

oder verwenden Sie dies für ein WENIGER Beispiel

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

Diese Antworten haben meine größte Sorge nicht befriedigt, nämlich die Bündelgröße und das Importieren einer Menge Code, um einige Komponenten zu verwenden. Ich habe eine Lösung here geschrieben, die Code-Aufteilung und einen einfachen Übersetzungsschritt beinhaltet.

Die wichtigsten Punkte sind:

  1. Basis-JS-Dateien kompilieren (es gibt 4)
  2. Stellen Sie sicher, dass der Basis-JS enthalten ist, bevor Sie Importe/Bundler ausführen
  3. Ändern Sie die CSS-Importe so, wie Sie es benötigen
  4. Führen Sie materialize.scss durch Ihren Bundler aus, wenn er Sass unterstützt, oder führen Sie den Kompilierungsschritt aus, um eine minimierte CSS-Datei abzurufen.
  5. Importieren Sie einzelne Komponenten und aktivieren Sie sie manuell

Lies Post für weitere Details.

0
mattdlockyer

Verwenden Sie CDN:

<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

Dann const M = window.M;, um die Initialisierung durchzuführen.

0
atultherajput