Как использовать materialize-css с React?

Ответ 1

Поскольку я использую CSS-модули, импорт материализуемого css будет охватывать его для этого конкретного компонента. Поэтому я сделал следующее

Шаг 1) установите материализацию

npm install [email protected] 

Шаг 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) import 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>
    )
  }
}

просто новичок, поэтому я был бы признателен за любые комментарии о недостатках этого метода

Ответ 2

С NPM:

Шаг 1) Установить материализовать

npm install [email protected] 

Проверьте материализовать документацию на наличие обновлений. Не пропустите @nex t в конце. Установленная версия будет выглядеть примерно так: ^ 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. Обратите внимание, что этот загрузчик уже включен в проекты, созданные с использованием create-реагировать на приложение, поэтому вам не нужны следующие шаги. Если вместо этого вы используете пользовательскую конфигурацию веб-пакета, запустите:

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

Теперь добавьте 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">

Затем в конфигурации веб-пакета добавьте внешние ссылки: https://webpack.js.org/configuration/externals/.

Ответ 3

Есть возможные способы, которые я могу рекомендовать использовать:

1. Один из способов - просто включить файл таблицы стилей в index.html и использовать свойство className в ваших компонентах React, как показано ниже.

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

2. Другой способ - объединить все ваши таблицы стилей в один файл таблицы стилей и использовать их как предыдущий.

3. Одним из вариантов может быть использование веб-пакета. Используя веб-пакет, можно использовать встроенные таблицы стилей в jsx файлах, просто запрашивая таблицу стилей, которую вы хотите включить.

   require("./stylesheet.css")

   Чтобы подробно изучить вариант таблицы стилей веб-пакета: http://webpack.github.io/docs/stylesheets.html

4. Также см. Репозиторий имен классов JedWatson для условного использования className. https://github.com/JedWatson/classnames

Ответ 4

Вы можете использовать https://react-materialize.github.io/#/, зачем изобретать велосипед.

установка react-materialize

npm install реактив-материализуйте

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

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

Образец

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

Скриншот

Ответ 5

Существует несколько способов использования Materialise CSS в ReactJS. Тем не менее, я всегда использую следующий самый простой.

Здесь вы можете использовать CSS-классы Materialise так же, как ваш HTML-сайт, используя только ClassName с тегами.

1) Установите Materialise CSS для ReactJS, используя NPM.

npm install [email protected] 

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>

NB => Поскольку все файлы должны проходить через файл index.js, достаточно импортировать минимизированный CSS Materialise в index.js один раз. В противном случае вам нужно импортировать эти CSS файлы во все ваши js файлы.

Этого достаточно, чтобы подготовить папку ReactJS к работе с Materialise CSS.

Ответ 6

Вы можете скопировать в папку "import" и добавить

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

или используйте это для примера LESS

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

Ответ 7

Эти ответы не удовлетворили мою самую большую озабоченность - размер пакета и импорт тонны кода для использования нескольких компонентов. Я написал выше решение здесь, что включает в себя код расщеплению и легкий шаг компиляции.

Ключевые моменты:

1. Скомпилировать базовые файлы JS (их 4)
2. Убедитесь, что базовая версия JS включена, прежде чем будет запущен импорт/сборщик
3. Измените импорт CSS только на то, что вам нужно
4. Запустите materialize.scss через ваш пакет, если он поддерживает Sass, или запустите шаг компиляции, чтобы получить минимизированный файл css.
5. Импортировать отдельные компоненты и активировать их вручную

Читайте пост для более подробной информации.

Ответ 8

Используйте CDN:

<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="#" onclick="location.href='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css'; return false;">

    <!-- 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; сделать инициализацию.