using materialize css with react

To use Materialize CSS with React, you will first need to install the Materialize CSS library. You can do this by running the following command in your React project directory:

npm install materialize-css

Once the installation is complete, you can import the Materialize CSS stylesheets and JavaScript files into your React application. You can do this by adding the following lines to your JavaScript or TypeScript file:

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

This will import the Materialize CSS styles and the necessary JavaScript components.

Next, you can start using Materialize CSS components in your React components. For example, to create a button with Materialize CSS styles, you can do the following:

import React, { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    M.AutoInit(); // Initialize Materialize JavaScript components
  }, []);

  return (
      <button className="btn waves-effect waves-light" type="button">
        Click Me

export default MyComponent;

In the above example, the useEffect hook is used to initialize the Materialize JavaScript components after the component is rendered. The M.AutoInit() function initializes all the Materialize components on the page.

You can find more information about using Materialize CSS with React in the official documentation: