React MUI Styled Engine（React MUI 样式引擎）

Material UI 库提供了一种使用 Material Design 原则来为应用程序设置样式的方法。”Styled Engine”（样式引擎）是指 Material UI 允许您使用 CSS-in-JS 方法自定义组件样式的方式，该方法涉及编写表示 CSS 样式的 JavaScript 对象。

Material UI Styled Engine 基于 JSS （JavaScript Style Sheets）库构建，该库提供了使用 JavaScript 定义样式的方法。当您使用 Material UI Styled Engine 时，可以编写样式，这些样式自动作用于您正在设置样式的组件，这有助于防止样式冲突，并简化样式管理。

语法： Material UI Styled Engine 的语法基于 JSS （JavaScript Style Sheets）库，该库提供了使用 JavaScript 定义样式的方法。

在 JSS 中，您将样式定义为 JavaScript 对象，其中每个键表示一个 CSS 类，而值是定义该类样式的对象。您可以在样式中使用 JavaScript 表达式来创建动态样式，例如使用变量或计算值。

const useStyles = makeStyles({
    root: {
        background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
        color: "white",
        height: 48,
        padding: "0 30px"
    }
});

安装React应用程序:

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

npx create-react-app mui-example

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

cd mui-example

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

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

示例1: 使用 Material UI Styled Engine 来给按钮组件添加样式。

App.js

import { makeStyles } from "@material-ui/core/styles"; 
  
const useStyles = makeStyles({ 
    root: { 
        textAlign: "center", 
        marginTop: "50px", 
    }, 
    btn: { 
        background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)", 
        border: 0, 
        borderRadius: 3, 
        boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)", 
        color: "white", 
        height: 48, 
        padding: "0 30px", 
    }, 
    header: { 
        color: "green", 
    }, 
}); 
  
function App() { 
    const classes = useStyles(); 
  
    return ( 
        <div className={classes.root}> 
            <h1 className={classes.header}>Geeksforgeeks</h1> 
            <button className={classes.btn}>My Button</button> 
        </div> 
    ); 
} 
  
export default App;

输出：

React MUI Styled Engine（React MUI 样式引擎）

在上面的示例中，使用makeStyles函数创建了一个返回button组件样式的useStyles hook。root样式应用于container，btn样式应用于button，使用className prop。

示例2： 使用Material UI Styled Engine来为组件添加样式的另一个示例。这次，让我们给一个自定义的card组件添加样式。

App.js

import { makeStyles } from "@material-ui/core/styles"; 
  
const useStyles = makeStyles({ 
    root: { 
        textAlign: "center", 
        margin: "50px 250px", 
    }, 
    card: { 
        background: "#f2f2f2", 
        borderRadius: 12, 
        boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)", 
        display: "flex", 
        flexDirection: "column", 
        maxWidth: "250px", 
        padding: 32, 
    }, 
    header: { 
        color: "green", 
    }, 
    content: { 
        flex: 1, 
        fontSize: 16, 
    }, 
}); 
  
function App() { 
    const classes = useStyles(); 
  
    return ( 
        <div className={classes.root}> 
            <div className={classes.card}> 
                <h1 className={classes.header}> 
                    Geeksforgeeks 
                </h1> 
                <p className={classes.content}> 
                    This is the content of an example  
                    card on geeksforgeeks.org website 
                </p> 
            </div> 
        </div> 
    ); 
} 
  
export default App;

输出：

React MUI Styled Engine（React MUI 样式引擎）