web-dev-qa-db-ja.com

Reactでmaterialize-cssを使用する方法は？

ES6モジュールを使用したMeteor/Reactプロジェクトがあります。 npmを使用してmaterialize-cssをインストールしましたが、JSXコードでMaterializeクラスを実際に使用する方法がわかりません。 materialize-cssからインポートするものは何ですか？または、メインのindex.htmlファイルにCSSを含める必要がありますか？

実際のUIコンポーネントにmaterial-uiを使用するため、グリッドシステムに主に必要です。

reactjsnpmmaterializematerial-ui
32
ffxsam

私はCSSモジュールを使用しているため、マテリアライズCSSをインポートすると、その特定のコンポーネントにスコープが設定されます。だから私は次のことをしました

ステップ1）マテリアライズのインストール

npm install materialize-css@next

ステップ2）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">

ステップ3）必要なコンポーネントにmaterialise.jsをインポートします

例えばSomeComponent.jsで（たとえば、これが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>
    )
  }
}

初心者なので、この方法の欠点についてコメントをいただければ幸いです

25
supi

NPMの場合：

ステップ1）マテリアライズのインストール

npm install materialize-css@next

更新については、マテリアライズのドキュメントを確認してください。最後に@ nextをお見逃しなく。インストールされたバージョンは次のようになります：^ 1.0.0-rc.2または^ 1.0.0-alpha.4

ステップ2）マテリアライズJSのインポート：

import M from 'materialize-css'

または、それがうまくいかない場合は、試してみることができますMを 'materialize-css/dist/js/materialize.min.js'からインポート

ステップ3）マテリアライズCSSをインポートします。

Index.htmlで

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

またはjavascriptで

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

Cssインポートを機能させるには、css loaderが必要です。このローダーは、create-react-appを使用してビルドされたプロジェクトにすでに含まれているため、次の手順は不要です。代わりに、カスタムwebpack構成を使用している場合は、次を実行します。

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

Webpack configにcss-loaderとstyle-loaderを追加してください

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

コンポーネントを個別に、またはM.AutoInit（）を使用して一度にすべて初期化できるようになりました。

ステップ4）マテリアライズアイコンをインポートします。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

CDNの場合：

HTMLファイルに次を追加します。

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

<!-- Materialize JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

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

次に、webpackの設定で、externalsを追加します。 https://webpack.js.org/configuration/externals/

13
Coding Elements

私が使用することをお勧めできる可能な方法があります：

  1. 1つの方法は、スタイルシートファイルをindex.htmlに含め、Reactコンポーネントと同じようにclassNameプロパティを使用するだけです。

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

  2. 別の方法は、すべてのスタイルシートを1つのスタイルシートファイルにバンドルし、それらを以前のスタイルシートファイルとして使用することです。

  3. 1つのオプションは、webpackを使用することです。 webpackを使用すると、含めるスタイルシートを要求するだけで、jsxファイルに埋め込まれたスタイルシートを使用できます。

    require("./stylesheet.css")

    詳細webpackスタイルシートオプションを調べるには： http://webpack.github.io/docs/stylesheets.html

  4. 条件付きclassNameの使用法については、JedWatsonのclassnamesリポジトリも参照してください。 https://github.com/JedWatson/classnames
6
burakhan alkan

https://react-materialize.github.io/#/ を使用して、車輪を再発明することができます。

インストールreact-materialize

npm install react-materialize

使用法

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

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

サンプル

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

スクリーンショット

enter image description here

6
Hitesh Sahu

ReactJSでMaterialize CSSを使用する方法はいくつかあります。ただし、私は常に次の最も簡単なものを使用します。

ここでは、タグ付きのClassNameのみを使用して、HTMLサイトと同様にMaterialize CSSクラスを使用できます。

1）NPMを使用してReactJSのMaterialize CSSをインストールします。

npm install materialize-css@next

2）次に、縮小されたマテリアライズCSSファイルをindex.jsファイルにインポートします。

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

3）Googleアイコンを使用する場合は、次のコードをpublic/index.htmlファイルに追加します。

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

4）最後に、入力フォームまたは他の場所でJavascriptイベントを使用するには、次のコードをpublic/index.htmlファイルに追加します。

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

N.B. =>すべてのファイルはindex.jsファイルを通過する必要があるため、縮小したMaterialize CSSをindex.jsに一度インポートするだけで十分です。それ以外の場合は、これらのCSSファイルをすべてのjsファイルにインポートする必要があります。

これで、ReactJSフォルダーをMaterialize CSSで稼働させる準備ができました。

4
IFTEKHAR I ASIF

「imports」フォルダーにコピーして追加できます

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

またはこれをLESSの例に使用してください

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

これらの答えは、いくつかのコンポーネントを使用するためにバンドルサイズと大量のコードをインポートするという私の最大の懸念を満たしませんでした。コード分​​割と簡単なコンパイル手順を含むソリューション ここ を作成しました。

キーポイントは次のとおりです。

  1. ベースJSファイルのコンパイル（4つあります）
  2. インポート/バンドラーを実行する前にベースJSが含まれていることを確認してください
  3. CSSインポートを必要なものだけに変更します
  4. バンドルがSassをサポートしている場合はmaterialize.scssを実行するか、コンパイル手順を実行して縮小されたcssファイルを取得します。
  5. 個々のコンポーネントをインポートして手動でアクティブ化する

投稿を読む 詳細については。

0
mattdlockyer

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>

その後、const M = window.M;初期化を行います。

0
atultherajput