Integration of Material-UI Components

Material-UI is a popular library for building user interfaces in React applications. It offers a comprehensive set of pre-designed, customizable UI components based on Material Design principles. These components include buttons, forms, navigation bars, modals, cards, and more, making it easy to create visually appealing and responsive user interfaces.

The Syncfusion^® Material theme is designed to follow the Material-UI guidelines, ensuring a consistent appearance with Material-UI components. This makes it seamless to integrate Syncfusion^® React components with existing Material-UI components, allowing you to create a unified and visually appealing application.

This guide will provide you with a step-by-step process for integrating Material-UI component into the Syncfusion^® React Message component.

Set up the React project

1. Set up a new React project by referring to the Syncfusion^® React Message component's Getting Started documentation.

2. Install the necessary Material-UI dependencies using the command:

npm install @mui/material @emotion/react @emotion/styled --save

npm install @mui/material @emotion/react @emotion/styled --save

Integrate Material-UI components

Integrate Material-UI components with the React Message component by directly including them as children. You can structure the Material-UI components inside a custom function and render the output within the Message component, as shown in the code snippet below:

import { Message, Severity } from '@syncfusion/react-notifications';
import { Button } from '@mui/material';
import { useState } from 'react';
import './App.css';

export default function App() {
    const [visible, setVisible] = useState(true);
    const [cssClass, setCssClass] = useState('sf-outline sf-primary sf-success msg-hidden');
    const showClick = () => {
        setVisible(true);
        setCssClass('sf-outline sf-primary sf-success msg-hidden');
    };
    const dismissClick = () => {
        setVisible(false);
        setCssClass('sf-outline sf-primary sf-success');
    };

    const contentTemplate = () => {
        return (
            <div>
                <h1>Merged pull request</h1>
                <p>Pull request #41 merged after a successful build</p>
                <Button id="closeBtn" className="sf-link" onClick={dismissClick}>Dismiss</Button>
            </div>
        );
    };

    return (
        <div className="msg-template-section component-section" style={{ margin: '300px' }}>
            <Button id="showBtn" className={cssClass} onClick={showClick}>Show pull request</Button>
            <Message id="msg_template" visible={visible} severity={Severity.Success}>{contentTemplate()}</Message>
        </div>
    );
}

import { Message, Severity } from '@syncfusion/react-notifications';
import { Button } from '@mui/material';
import { useState } from 'react';
import './App.css';

export default function App() {
    const [visible, setVisible] = useState(true);
    const [cssClass, setCssClass] = useState('sf-outline sf-primary sf-success msg-hidden');
    const showClick = () => {
        setVisible(true);
        setCssClass('sf-outline sf-primary sf-success msg-hidden');
    };
    const dismissClick = () => {
        setVisible(false);
        setCssClass('sf-outline sf-primary sf-success');
    };

    const contentTemplate = () => {
        return (
            <div>
                <h1>Merged pull request</h1>
                <p>Pull request #41 merged after a successful build</p>
                <Button id="closeBtn" className="sf-link" onClick={dismissClick}>Dismiss</Button>
            </div>
        );
    };

    return (
        <div className="msg-template-section component-section" style={{ margin: '300px' }}>
            <Button id="showBtn" className={cssClass} onClick={showClick}>Show pull request</Button>
            <Message id="msg_template" visible={visible} severity={Severity.Success}>{contentTemplate()}</Message>
        </div>
    );
}

Run the project

Execute the following command to run the project:

npm run dev

npm run dev

The output will appear as follows:

Merged pull request

Pull request #41 merged after a successful build

Integration of Material-UI Components

Set up the React project

Integrate Material-UI components

Run the project

Merged pull request

Enhance your React apps with Syncfusion components today