User:Jyao21/sandbox

MUI (previously known as Material-UI) is an open-source CSS framework that provides React components out-of-the-box following Google's Material Design language that launched in 2014. The library is one of the most popular UI libraries with over 3.2 million weekly downloads on npm and over 78k stars on GitHub.

MUI

Other names	Material-UI
Original author(s)	Olivier Tassinari, Matt Brookes, Hai Nguyen
Initial release	May 17, 2018
Stable release	v5.8.3
Repository	https://github.com/mui
License	MIT License
Website	https://mui.com

History

MUI began as an implementation of Material Design guidelines for React apps in 2014 with the goal to enable software developers to use Material Design. The company schedules major releases at least every 12 months and at most every 6 months.

Version 1.0.0

In May 2018, MUI released version 1.0.0 to the public after two years of internal refactoring, resulting in a library that provides a framework to follow Google's design language and a list of UI components that could be customized by developers. In version 1.0.0, the company focused their attention on addressing issues of customizability, ease of use, and code quality to streamline the developer experience by creating custom theme objects, improving documentation, examples, and low-level components, and reducing the bundle size of the library. This version of MUI is no longer supported.

Version 3.0.0

August of 2018 saw the release of the next version of MUI, version 3.0.0. This release updated documentation and fixed component bugs. Subsequent minor updates to the library included further bug fixes and browser support updates. This version of MUI is no longer supported.

Version 4.0.0

Version 4.0.0 of MUI was released in 2019, bringing with it major changes to the MUI library. Some of these included broader support for TypeScript, improved performance (implementing tree shaking, bundle size reduction, etc.), and more general code improvements.

Version 5.0.0

Version 5.0.0 is the latest major release of MUI, becoming available to developers in September 2021. The company rebranded under the MUI name with this release and updated their product offering accordingly. This major update of MUI added new components, improved customizability, and new product lines.

Components

MUI components can be imported into React components using ES6 style import statements.

import React from "react";
import { Typography } from "@mui/material";

function App() {
    return <Typography>Hello World</Typography>;
}

The sx Prop

The sx property is a superset of CSS that bundles the style functions for MUI components in the style system, including custom design systems. Any valid CSS can be overridden on a component level using this property, with no limit on how much CSS is overridden. However, performance is decreased when using this prop. The following is a rudimentary example of a blue button with rounded corners.

import React from "react";
import { Button } from "@mui/material";

function App() {
    return (
        <Button 
            variant={'contained'} 
            sx={{borderRadius: '15px', backgroundColor: '#1982FC'}}
        >
        Hello World
        </Button>
    );
}