Material-UI in SPFx

This article provides steps to implement the Material-UI form in the SharePoint Framework (SPFx) web part.
Material-UI helps create modern and consistent user interfaces that align with Google’s Material Design guidelines.

⚙️ Install Dependencies

Install Material-UI and required dependencies:

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

Import the required libraries and configure SPFx context:

import { sp } from "@pnp/sp/presets/all";
sp.setup({ spfxContext: this.props.context });

🧩 Configure Custom Properties

Create a new interface for component props inside your components folder:

export interface ISpFxReactMaterialUiState {
  name: string;
  description: string;
  agreeTerms: boolean;
  age: string;
}

🪄 Implement React Component

Import required modules and define your React component:

import * as React from "react";
import { TextField, Button, Checkbox, FormControlLabel, FormGroup, RadioGroup, Radio } from "@mui/material";
import { sp } from "@pnp/sp/presets/all";
import { ISpFxReactMaterialUiState } from "./ISpFxReactMaterialUiState";

export default class SpFxReactMaterialUi extends React.Component<{}, ISpFxReactMaterialUiState> {
  constructor(props: {}) {
    super(props);
    this.state = {
      name: "",
      description: "",
      agreeTerms: false,
      age: "",
    };
  }

  private async saveDetails(): Promise<void> {
    await sp.web.lists.getByTitle("People").items.add({
      Title: this.state.name,
      Description: this.state.description,
      Age: this.state.age,
      AgreeTerms: this.state.agreeTerms,
    });
    alert("Data saved successfully!");
  }

  public render(): React.ReactElement<{}> {
    return (
      <div style={{ padding: "20px", maxWidth: "500px" }}>
        <h3>Material-UI Form</h3>

        <TextField
          variant="outlined"
          label="Name"
          fullWidth
          margin="normal"
          value={this.state.name}
          onChange={(e) => this.setState({ name: e.target.value })}
        />

        <TextField
          variant="outlined"
          label="Description"
          fullWidth
          margin="normal"
          multiline
          rows={3}
          value={this.state.description}
          onChange={(e) => this.setState({ description: e.target.value })}
        />

        <RadioGroup
          value={this.state.age}
          onChange={(e) => this.setState({ age: e.target.value })}
        >
          <FormControlLabel value="Under 20" control={<Radio />} label="Under 20" />
          <FormControlLabel value="20-40" control={<Radio />} label="20-40" />
          <FormControlLabel value="Above 40" control={<Radio />} label="Above 40" />
        </RadioGroup>

        <FormGroup>
          <FormControlLabel
            control={
              <Checkbox
                checked={this.state.agreeTerms}
                onChange={(e) => this.setState({ agreeTerms: e.target.checked })}
              />
            }
            label="I agree to terms and conditions"
          />
        </FormGroup>

        <Button
          variant="contained"
          color="primary"
          onClick={() => this.saveDetails()}
        >
          Submit
        </Button>
      </div>
    );
  }
}

🚀 Build and Deploy the Solution

Once implementation is complete, build and package the solution:

gulp build
gulp bundle --ship
gulp package-solution --ship

Upload the .sppkg file to your App Catalog, deploy it, and add the web part to a modern SharePoint page.

📂 GitHub Sample Project

View full SPFx project on GitHub:Material-UI in SPFx

GitHub

✅ Summary

Using Material-UI in SPFx web parts allows developers to design beautiful, consistent, and responsive interfaces easily.
It integrates seamlessly with SPFx and works perfectly in modern SharePoint environments.