React Material UI 组件库使用方法详解及样例-JavaScript中文网-JavaScript教程资源分享门户

React Material UI 是一个基于 React 的 UI 组件库，它提供了一系列常用的 UI 组件，例如按钮、表单、对话框等等。这些组件都遵循 Material Design 的设计规范，使得我们可以快速地开发出具有良好用户体验的 Web 应用程序。

本文将详细介绍 React Material UI 的使用方法，并提供一些实用的样例，帮助读者更好地掌握这个组件库的使用。

安装 React Material UI

安装 React Material UI 非常简单，只需要执行以下命令即可：

npm install @material-ui/core

使用 React Material UI

使用 React Material UI 的方式与普通的 React 组件并没有太大的区别。我们只需要在需要使用的组件中引入它，然后像普通组件一样使用即可。

// javascriptcn.com 代码示例
import React from 'react';
import { Button } from '@material-ui/core';

function App() {
  return (
    <div>
      <Button variant="contained" color="primary">
        确定
      </Button>
      <Button variant="contained" color="secondary">
        取消
      </Button>
    </div>
  );
}

export default App;

上面的代码中，我们引入了 Button 组件，并在 App 组件中使用了它。variant 和 color 是 Button 组件的两个属性，用来控制按钮的样式。

常用组件

React Material UI 提供了很多常用的 UI 组件，下面我们来介绍一些常用的组件及其使用方法。

Button

Button 组件用来创建按钮，它有多种样式可供选择。我们可以通过 variant 和 color 属性来控制按钮的样式。

// javascriptcn.com 代码示例
import React from 'react';
import { Button } from '@material-ui/core';

function App() {
  return (
    <div>
      <Button variant="contained" color="primary">
        确定
      </Button>
      <Button variant="contained" color="secondary">
        取消
      </Button>
    </div>
  );
}

export default App;

TextField

TextField 组件用来创建文本输入框，它有多种样式可供选择。我们可以通过 variant 属性来控制文本输入框的样式。

// javascriptcn.com 代码示例
import React from 'react';
import { TextField } from '@material-ui/core';

function App() {
  return (
    <div>
      <TextField
        id="standard-basic"
        label="标准文本框"
      />
      <TextField
        id="outlined-basic"
        label="轮廓文本框"
        variant="outlined"
      />
      <TextField
        id="filled-basic"
        label="填充文本框"
        variant="filled"
      />
    </div>
  );
}

export default App;

Checkbox

Checkbox 组件用来创建复选框，它有多种样式可供选择。我们可以通过 color 属性来控制复选框的颜色。

// javascriptcn.com 代码示例
import React from 'react';
import { Checkbox } from '@material-ui/core';

function App() {
  const [checked, setChecked] = React.useState(true);

  const handleChange = (event) => {
    setChecked(event.target.checked);
  };

  return (
    <div>
      <Checkbox
        checked={checked}
        onChange={handleChange}
        color="primary"
        inputProps={{ 'aria-label': 'primary checkbox' }}
      />
      <Checkbox
        checked={checked}
        onChange={handleChange}
        color="secondary"
        inputProps={{ 'aria-label': 'secondary checkbox' }}
      />
    </div>
  );
}

export default App;

Radio

Radio 组件用来创建单选框，它有多种样式可供选择。我们可以通过 color 属性来控制单选框的颜色。

// javascriptcn.com 代码示例
import React from 'react';
import { Radio, RadioGroup, FormControlLabel } from '@material-ui/core';

function App() {
  const [value, setValue] = React.useState('female');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <div>
      <RadioGroup aria-label="gender" name="gender1" value={value} onChange={handleChange}>
        <FormControlLabel value="female" control={<Radio color="primary" />} label="女性" />
        <FormControlLabel value="male" control={<Radio color="primary" />} label="男性" />
        <FormControlLabel value="other" control={<Radio color="primary" />} label="其他" />
      </RadioGroup>
      <RadioGroup aria-label="gender" name="gender2" value={value} onChange={handleChange}>
        <FormControlLabel value="female" control={<Radio color="secondary" />} label="女性" />
        <FormControlLabel value="male" control={<Radio color="secondary" />} label="男性" />
        <FormControlLabel value="other" control={<Radio color="secondary" />} label="其他" />
      </RadioGroup>
    </div>
  );
}

export default App;

总结

React Material UI 是一个非常实用的 UI 组件库，它提供了很多常用的 UI 组件，可以帮助我们快速地开发出具有良好用户体验的 Web 应用程序。在本文中，我们详细介绍了 React Material UI 的使用方法，并提供了一些实用的样例，希望能够帮助读者更好地掌握这个组件库的使用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657699c2d2f5e1655dfeabed