Material-UI -岩石教程

主要特点

1. 丰富的组件库

Material-UI 提供了大量预构建的组件，如按钮、表单、对话框、图标、布局组件等。这些组件都遵循 Material Design 规范，确保一致的用户体验。

2. 强大的主题定制功能

Material-UI 支持全局和局部的主题定制。开发者可以轻松创建自定义主题，调整颜色、字体、间距等，以满足设计需求。

3. 响应式设计

组件和布局工具（如 Grid 和 Box）都支持响应式设计，可以根据不同屏幕尺寸进行调整，确保应用在各种设备上都有良好的显示效果。

4. 优秀的文档和社区支持

Material-UI 拥有详尽的官方文档和活跃的社区支持。开发者可以从中获取丰富的资源和帮助。

5. 可扩展性和灵活性

通过使用 styled 和 sx 属性，开发者可以对组件进行高度定制。此外，Material-UI 还支持与其他样式解决方案（如 CSS-in-JS）一起使用。

安装

使用 npm 或 yarn 安装 Material-UI。

npm install @mui/material @emotion/react @emotion/styled

或

yarn add @mui/material @emotion/react @emotion/styled

使用示例

引入组件

可以按需引入组件来使用。

import * as React from 'react';
import Button from '@mui/material/Button';

function App() {
  return (
    <Button variant="contained" color="primary">
      Hello World
    </Button>
  );
}

export default App;

主题定制

Material-UI 支持使用主题来定制组件样式。可以创建一个自定义主题，并通过 ThemeProvider 提供给应用。

import { createTheme, ThemeProvider } from '@mui/material/styles';
import Button from '@mui/material/Button';
import * as React from 'react';

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
    secondary: {
      main: '#dc004e',
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button color="primary">Primary Button</Button>
      <Button color="secondary">Secondary Button</Button>
    </ThemeProvider>
  );
}

export default App;

主要组件

按钮 (Button)

Material-UI 提供了多种按钮组件，包括文本按钮、轮廓按钮和包含按钮。

import Button from '@mui/material/Button';

function App() {
  return (
    <div>
      <Button variant="text">Text</Button>
      <Button variant="outlined">Outlined</Button>
      <Button variant="contained">Contained</Button>
    </div>
  );
}

export default App;

图标 (Icon)

使用 Material-UI 的图标库，可以轻松添加各种图标。

import Icon from '@mui/material/Icon';

function App() {
  return (
    <div>
      <Icon>star</Icon>
      <Icon color="primary">star</Icon>
      <Icon color="secondary">star</Icon>
    </div>
  );
}

export default App;

布局 (Layout)

使用 Grid 和 Box 组件来构建响应式布局。

import Grid from '@mui/material/Grid';
import Box from '@mui/material/Box';

function App() {
  return (
    <Grid container spacing={2}>
      <Grid item xs={12} sm={6}>
        <Box bgcolor="primary.main" color="primary.contrastText" p={2}>
          Item 1
        </Box>
      </Grid>
      <Grid item xs={12} sm={6}>
        <Box bgcolor="secondary.main" color="secondary.contrastText" p={2}>
          Item 2
        </Box>
      </Grid>
    </Grid>
  );
}

export default App;

高级主题定制

使用 styled 和 sx 属性进行更细粒度的样式控制。

import { styled } from '@mui/material/styles';
import Button from '@mui/material/Button';

const MyButton = styled(Button)({
  background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
  borderRadius: 3,
  border: 0,
  color: 'white',
  height: 48,
  padding: '0 30px',
  boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
});

function App() {
  return <MyButton>Styled Button</MyButton>;
}

export default App;

官方资料

更多详细信息和教程，请参考 Material-UI 的官方文档：