React MUI Color

Last Updated : 16 Mar, 2023

React MUI (Material-UI) provides a predefined color palette that you can use to style the components in your React application. The palette consists of a set of named colors, each of which has a specific purpose and semantic meaning.

Syntax:

import { blue } from '@material-ui/core/colors';
function MyButton() {
    return 
    ( <Button style={{ backgroundColor: blue[500] }}>
              Some text
          </Button>
      )
}

Installing React App:

Step 1: Create a React app using the following command.

npx create-react-app mui-color

Step 2: Now get into the project directory

cd mui-color

Installing Material-UI: Installing Material-UI’s source files via npm/yarn, and they take care of injecting the CSS needed.

npm install @material-ui/core
OR
yarn add @material-ui/core

Importing Color:

import { blue } from '@material-ui/core/colors';

Example 1: In this example, we are importing the Button component from @material-ui/core and the blue color from @material-ui/core/colors. We then use the blue color as the background color of the Button component by setting the backgroundColor style property to blue[500].

App.js

Javascript

import React from "react"; 
import { Button } from "@material-ui/core"; 
import { blue } from "@material-ui/core/colors"; 
import "./App.css"; 
const App = () => { 
    return ( 
        <div className="App"> 
            <h1>GeeksforGeeks</h1> 
            <Button style={{ backgroundColor: blue[500] }}> 
                Click me! 
            </Button> 
        </div> 
    ); 
}; 
  
export default App;

Output:

Example 2: In this example, we are importing the Typography component from @material-ui/core and the green color from @material-ui/core/colors. We then use the green color as the text color of the Typography component by setting the color style property to green[800].

App.js

Javascript

import React from "react"; 
import { Typography } from "@material-ui/core"; 
import { green } from "@material-ui/core/colors"; 
import "./App.css"; 
const App = () => { 
    return ( 
        <div className="App"> 
            <Typography variant="h1" 
                style={{ color: green[800] }}> 
                GeeksforGeeks 
            </Typography> 
        </div> 
    ); 
}; 
  
export default App;