安装并使用 Chakra UI 和 React
介绍
安装
要安装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";
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~