安装并使用 Chakra UI 和 React

2020-10-30 08:00飞浪

介绍

与其他 React UI 库（如 React Bootstrap、Material UI 等）相比，Chakra UI为您提供了更强大的组件样式和自定义功能。

如果您是 Tailwind CSS 的粉丝，您一定会喜欢 Chakra UI，因为它遵循与 Tailwind CSS 相同的简约和模块化方法。

在本指南中，我们将讨论如何安装、导入和使用 Chakra UI 中的组件。我们将使用 Chakra UI 0.8 版，因为 1.0 版尚未正式发布。

安装

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

      npm install @chakra-ui/core @emotion/core @emotion/styled emotion-theming

Chakra UI 使用Emotion来处理组件样式。如您所见，您必须自行安装对等依赖项，因为它们默认不随chakra-ui提供。

接下来，将你的 React 应用包装在ThemeProvider中。像这样修改你的index.js 。

      import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { ThemeProvider } from "@chakra-ui/core";

ReactDOM.render(
  <ThemeProvider>
    <App />
  </ThemeProvider>,
  document.getElementById("root")
);
    

导入 Box 组件

在本节中，我们将从chakra-ui导入Box组件。

chakra-ui最酷的功能之一是您可以使用 props 的简写形式。例如，您可以使用w代替width，效果相同。

首先，从App.js中的chakra-ui导入Box ，并在App()函数中使用它。

      import React from "react";
import { Box } from "@chakra-ui/core";

export default function App() {
  return (
    <div>
      <Box w="400px" h="400px">
        Hello World!
      </Box>
    </div>
  );
}
    

在上面的代码中，w和h分别是宽度和高度的简写。

它看起来是这样的。

样式框组件

上面示例中的Box组件看起来不像一个盒子，只是应用程序某个角落的一些文本。使用bg简写属性添加一些背景颜色。

      <Box bg="lavender" w="400px" h="400px">
  Hello World!
</Box>
    

它看起来是这样的。

现在，您可以将 400x400 框与背景区分开来。接下来，设置文本样式并将其水平对齐到框的中心。

      <Box
  bg="lavender"
  color="#2d383c"
  fontSize="2rem"
  textAlign="center"
  fontFamily="Consolas"
  w="400px"
  h="400px"
>
  Hello World!
</Box>
    

您传递了color、textAlign、fontSize和fontFamily属性来设置框内文本的样式。这里1rem等于16px。

它看起来是这样的。

现在，使用border属性给框添加边框。

      <Box
  border="1px"
  rounded="10px"
  borderColor="gray.300"
  boxShadow="md"
  bg="lavender"
  color="#2d383c"
  fontSize="2rem"
  textAlign="center"
  fontFamily="Consolas"
  w="400px"
  h="400px"
>
  Hello World!
</Box>
    

这里的rounded是border-radius的简写，boxSahdow是box-shadow的简写。你使用了md作为boxShadow prop的值，相当于16px。

它看起来是这样的。

要添加一些边距和填充，请使用简写属性p和m。您还可以使用px和py，其中px设置左侧和右侧的填充。类似地，py将其设置为顶部和底部。

另外，将文本Hello World!更改为Lorem Ipsum。

      <Box
  m="8px"
  p="8px"
  border="1px"
  rounded="10px"
  borderColor="gray.300"
  boxShadow="md"
  bg="lavender"
  color="#2d383c"
  fontSize="2rem"
  textAlign="center"
  fontFamily="Consolas"
  w="400px"
  h="400px"
>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias aperiam
  doloremque exercitationem saepe, sed modi odit officia illum iste vel? Rerum
  dignissimos pariatur, odit impedit iste aperiam facere atque iure!{" "}
</Box>
    

如您所见，文本溢出了Box组件；您可以通过将overflow="hidden" prop 传递给Box来解决这个问题。

      <Box
  m="8px"
  p="8px"
  border="1px"
  rounded="10px"
  borderColor="gray.300"
  boxShadow="md"
  bg="lavender"
  color="#2d383c"
  fontSize="2rem"
  textAlign="center"
  fontFamily="Consolas"
  w="400px"
  h="400px"
  overflow="hidden"
>
  Lorem ipsum...
</Box>
    

isTruncated是另一个可以传递以截断长文本的很酷的道具。

      <Box
  m="8px"
  p="8px"
  border="1px"
  rounded="10px"
  borderColor="gray.300"
  boxShadow="md"
  bg="lavender"
  color="#2d383c"
  fontSize="2rem"
  textAlign="center"
  fontFamily="Consolas"
  w="400px"
  h="400px"
  isTruncated
>
  Lorem ipsum ....
</Box>
    

将图像添加到框中

在本节中，您将在上面的示例中向Box组件添加图像。为此，您将使用Image和Text组件。

在App.js中导入图像和文本。

      import { Box, Image, Text } from "@chakra-ui/core";

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

_查看原文

曝光36132浏览1916