React MUI颜色

React MUI（Material-UI）为您的React应用程序提供了预定义的颜色调色板，您可以使用它来为组件样式化。调色板由一组具有特定用途和语义含义的命名颜色组成。

语法：

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

安装 React 应用程序：

步骤 1： 使用以下命令创建一个 React 应用程序。

npx create-react-app mui-color

步骤2： 现在进入项目目录

cd mui-color

安装Material-UI： 通过npm/yarn安装Material-UI的源文件，并且它们会自动注入所需的CSS。

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

导入颜色：

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

示例1： 在这个示例中，我们从@material-ui/core中导入Button组件和从@material-ui/core/colors中导入蓝色。然后，我们通过将backgroundColor样式属性设置为blue[500]，将蓝色作为Button组件的背景色。

App.js

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;

输出：

React MUI颜色

示例2： 在这个示例中，我们从@material-ui/core导入了Typography组件和@material-ui/core/colors中的绿色。然后，我们通过将样式属性设置为green[800]，将绿色作为Typography组件的文本颜色。

App.js

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;

输出：

React MUI颜色