Solana
  • Solana Development
    • Prerequisites
    • Getting Started
      • ShadCN
      • Getting started with Next.js
    • Developing on Solana
      • Minting Solana NFTs: A Beginner's Guide
  • Examples
    • Creating a Custom Solana Wallet Connect UI
    • Portfolio Applicaiton
    • Solana Wallet Adapter
    • JavaScript Client for Mpl Core
  • Solana Cookbook
  • Wonka.JS and next.js
  • Metaplex Sugar
  • Solana Wallet Adapter To a Next.Js application
    • Basic Wallet Adapter with React
    • Integrating Solana Wallet Adapter in a Next.js Application
    • Solana Wallet Example Code and Tutorial
    • Git Hub Code
  • Token Burning Candy Machine
  • Page 1
  • DLMM
  • Page 2
  • React And Next.JS
    • Material UI
    • Installation
    • Usage
    • Example projects
Powered by GitBook
On this page
  • Quickstart
  • Globals
  1. React And Next.JS

Usage

Learn the basics of working with Material UI components.

PreviousInstallationNextExample projects

Last updated 8 months ago

Quickstart

After , you can import any Material UI component and start playing around. For example, try changing the variant on the to outlined to see how the style changes:

Hello worldJSTSCollapse code

import * as React from 'react';
import Button from '@mui/material/Button';

export default function ButtonUsage() {
  return <Button variant="contained">Hello world</Button>;
}

Press Enter to start editing

Globals

Since Material UI components are built to function in isolation, they don't require any kind of globally scoped styles. For a better user experience and developer experience, we recommend adding the following globals to your app.

Responsive meta tag

Material UI is a mobile-first component library—we write code for mobile devices first, and then scale up the components as necessary using CSS media queries.

To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head> element:

<meta name="viewport" content="initial-scale=1, width=device-width" />

CssBaseline

Default font

Material UI provides an optional component. It fixes some inconsistencies across browsers and devices while providing resets that are better tailored to fit Material UI than alternative global style sheets like .

Material UI uses the Roboto font by default. See for complete details.

installation
Button
CssBaseline
normalize.css
Installation—Roboto font