使用 Material UI 为 React 应用添加样式

2020-10-30 08:00:00 · 飞浪

本指南演示了使用 Material UI 创建和设计 React 应用程序的分步过程。

介绍

本指南将讨论使用 Material UI 创建和设计 React 应用程序的分步过程。

此应用程序将使用《最终空间 API》的角色端点，这是一个免费的 RESTful API，提供有关《最终空间》电视节目的角色、剧集和地点的信息。

本指南假设您已经知道如何在 React 应用中安装和配置 Material UI。您可以阅读在 React 中安装和使用 Material UI以开始使用。

设置 React App

您可以使用Create React App模板快速初始化 React 项目，而无需进行任何手动配置。

在项目的根目录中，运行以下命令。

      npx create-react-app react-material-ui-example
cd react-material-ui-example
    

要安装 Material-UI，请在 React 项目的根目录中运行以下命令。

      npm install @material-ui/core

将以下代码添加到public/index.html文件的<head>标签中。

      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
    

从src目录中删除App.css、index.css、logo.svg。

从src/index.js文件中删除index.css导入。

      // src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
    

像这样修改你的src/App.js文件。

      // src/App.js
import React, { useEffect, useState } from "react";

function App() {
  return <div></div>;
}

export default App;
    

通过在终端中运行以下命令启动开发服务器。

      npm start

导航到 https://localhost:3000；您将看到一个空白页，因为您的应用程序目前是空的。

从 API 获取数据

首先，您需要从Final Space API 的/character端点获取数据。您可以通过在useEffect()钩子中使用fetch()并将响应数据存储在状态变量中来执行此操作。您还可以使用axios发出 API 请求。

通过向useEffect()提供一个空数组作为第二个参数，您可以确保仅在初始渲染之后发出请求。

      function App() {
  const [data, setData] = useState([]);
  useEffect(() => {
    fetch("https://finalspaceapi.com/api/v0/character/?limit=12")
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  return <div></div>;
}

export default App;
    

在上面的代码中，您通过在 URL 中传递/?limit=12查询来限制来自端点的响应。

使用容器包装 React 应用

现在，您将使用Container组件为应用程序添加一些边距。

从 Material-UI 库导入容器。

      import Container from "@material-ui/core/Container";

现在，在App()函数内部使用它。

      return (
  <div>
    <Container> </Container>
  </div>
);
    

您不会在应用程序上看到任何变化，但应用程序中添加了一些边距，这在Container内添加其他组件后将会很明显。

向 React App 添加标题

您的应用需要一个标题；为此，请使用Material-UI 库的Typography组件。在App.js文件中导入此组件。

      import Typography from "@material-ui/core/Typography";

现在，在容器组件内部使用它。

      <Container>
  <Typography color="textPrimary" gutterBottom variant="h2" align="center">
    React Material UI Example
  </Typography>
</Container>
    

它看起来是这样的。

这些是使用的道具：

gutterBottom：在组件底部添加边距。
color="textPrimary"：指定文本的颜色。您也可以使用textSeconadry、primary等。
align="center"：将组件居中对齐。
variant="h2"：应用主题排版样式。

还有更多 props 可以传递来设置Typography组件的样式。您可以在此处阅读有关它们的信息。

创建角色卡

接下来，您需要决定在应用中显示哪些数据；此项目将显示角色的姓名、图像和状态。您可以查看角色架构并向应用添加其他数据。

您将导入并使用Card、CardMedia和CardContent组件为每个角色创建卡片。

      import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
    

CardContent用于显示信息，CardMedia用于显示Card组件内的图像。

图像的来源位于CardMedia组件的图像道具中。

使用数据变量上的.map()方法为字符创建单独的卡片。在<Typography>组件后添加以下代码。

      {
  data.map((character) => (
    <Card
      style={{
        maxWidth: 345,
        boxShadow: "0 5px 8px 0 rgba(0, 0, 0, 0.3)",
        backgroundColor: "#fafafa",
      }}
    >
      <CardMedia style={{ height: "300px" }} image={character.img_url} />
    </Card>
  ))
}
    

您的应用程序的外观如下。

在上面的代码中，您使用内联样式来设置Card和CardImage组件的样式；虽然它可以起作用，但是却会使您的代码看起来很混乱。

幸运的是，Material-UI 提供了一个解决方案：makeStyles。使用makeStyles，你可以在 JS 中添加 CSS，而不会使代码看起来很杂乱。

首先，您需要在您的应用程序中导入makeStyles。

      import { makeStyles } from "@material-ui/core/styles";

接下来，将应用中所需的所有 CSS 作为对象传

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

使用 Material UI 为 React 应用添加样式

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

// src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') );

function App() { const [data, setData] = useState([]); useEffect(() => { fetch("https://finalspaceapi.com/api/v0/character/?limit=12") .then((res) => res.json()) .then((data) => setData(data)); }, []); return <div></div>; } export default App;

{ data.map((character) => ( <Card style={{ maxWidth: 345, boxShadow: "0 5px 8px 0 rgba(0, 0, 0, 0.3)", backgroundColor: "#fafafa", }} > <CardMedia style={{ height: "300px" }} image={character.img_url} /> </Card> )) }