前言： @aksara-ui/core 是一个基于 React 开发的 UI 组件库，专注于设计语言，在设计规范上秉承简洁，易用，灵活的理念，为用户带来优雅美观的使用体验。在本篇文章中我们将学习如何使用该 npm 包，并深入理解其相关技术细节。
安装
要开始使用 @aksara-ui/core，你需要先安装相关的 npm 包。你可以通过以下命令在你的项目中安装：
npm install @aksara-ui/core
或者使用 yarn：
yarn add @aksara-ui/core
安装完成后，你就可以开始开发了。
使用
@aksara-ui/core 提供了大量的 React 组件供开发者使用。在使用前，我们需要先引入所需组件。这里我们以 Button 为例，我们可以像下面这样引入组件：
import { Button } from '@aksara-ui/core';在组件可被使用前，你还需要引用样式文件。你可以像下面这样在你的项目中引用 @aksara-ui/core 的样式文件：
import '@aksara-ui/core/dist/aksara-ui.css';
这里我建议将样式文件在入口文件中进行引用，这样样式文件将全局引入，您将可以在项目的其它组件中随时使用 @aksara-ui/core 的组件而无需再次引入样式文件。
Button
Button 是 @aksara-ui/core 中的一个基本组件，也是在我们日常开发中使用频率极高的一个组件。Button 组件的使用非常简单，你可以像下面这样来使用：
import React from 'react';
import { Button } from '@aksara-ui/core';
export default () => (
<Button type="primary">点击我</Button>
);在上面的代码中，我们引入了 @aksara-ui/core 中的 Button 组件，并在页面中使用了一个颜色类型为 primary 的 Button。
组件开发细节
默认主题
在 @aksara-ui/core 中，我们使用 styled-components 进行样式的处理。当你使用 Button 组件时，你会发现这就意味着你可以使用 styled-components 自定义你的 Button 样式。
-- -------------------- ---- ------- ------ ------ ---- -------------------- ----- ------------ - --------------- ----------------- ---- ------ ------ -- ------ ------- -- -- - ------------- ----------------------------------- --
在上面的代码中，我们首先引入 styled-components，并使用它来创建一个新的 CustomButton 组件。我们将 Button 组件作为 CustomButton 的父组件，并将自定义的样式应用到 CustomButton 中。
自定义主题
当你想要定制化你的 Button 样式时，你可以使用主题的方式来实现。主题是一种能够让你对组件中某些样式进行统一处理的方法。
在 @aksara-ui/core 中，我们可以使用 ThemeProvider 来修改默认主题，具体代码如下：
-- -------------------- ---- -------
------ - ------------- - ---- --------------------
------ - ------ - ---- ------------------
----- ----------- - -
------- -
-------- --------
--
--
------ ------- -- -- -
-------------- --------------------
------- -------------------- ---------------
----------------
--上面的代码使用了 ThemeProvider 来为 Button 组件应用自定义主题，该主题仅修改了 primary 颜色。
结论
到这里，我相信你已经掌握了如何使用 @aksara-ui/core 以及其相关技术细节。在接下来的开发中，我建议你多尝试学习更多普及，使得你能够更好的理解和运用 @aksara-ui/core。
示例代码： https://github.com/hdy915286825/aksara-ui-core-use-guide
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/150967