在前端开发中，使用 UI 库和组件是非常必要和常见的操作。其中，Material-UI 是一个使用 React 实现的一款非常优秀的 UI 库，提供了众多优美、精美的组件。而 @makeomatic/material-ui-scrollable-tabs 是在 Material-UI 基础上实现的一种可滚动的选项卡组件。
本文将详细介绍如何使用 @makeomatic/material-ui-scrollable-tabs，以及如何进行配置和修改它的样式。同时，本文也将带你了解到更多 Material-UI 相关组件开发的技术。
安装
使用 npm 安装 @makeomatic/material-ui-scrollable-tabs：
npm install @makeomatic/material-ui-scrollable-tabs
快速上手
@makeomatic/material-ui-scrollable-tabs 的简单使用非常易懂。首先需要引入它，然后在所需的位置使用它即可。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- - ---- ------------------------------------------
----- ---- - -
- ------ ---- -- --
- ------ ---- -- --
- ------ ---- -- --
- ------ ---- -- --
- ------ ---- -- --
- ------ ---- -- --
- ------ ---- -- --
- ------ ---- -- --
- ------ ---- -- --
- ------ ---- --- --
--
------ ------- -------- ----- -
----- ------- --------- - ------------------
----- ------------ - ------- --------- -- -
-------------------
--
------ -
---- -------- --------- -------- ------- -- ----- ---
---------------
-------------
-----------------------
-----------
--
-----
-------------------
------
------
--
-上述代码中，首先需要引入 @makeomatic/material-ui-scrollable-tabs，然后创建一个 tabs 数组，其中每个元素都包含 label 属性，即选项卡的名称。接着，我们在 App 组件中，引入 ScrollableTabs 组件，并初始化 value 和 handleChange 函数，通过 value 属性和 onChange 函数来控制当前选中的选项卡。
最后，我们在 App 组件中的 return 中，使用 ScrollableTabs 组件展现选项卡，同时在组件下方使用 div 标签来展示当前选中的选项卡的名称。
配置选项
在使用 @makeomatic/material-ui-scrollable-tabs 的时候，还可以进行一些可配置的操作。
scrollButtons
通过 scrollButtons 属性可以确定是否需要显示选项卡下方的滚动控制按钮。默认值为 auto，即当选项卡过多时才展示滚动控制按钮。将其设置为 on 或 off 可以强制启用或停用滚动控制按钮。
<ScrollableTabs
value={value}
onChange={handleChange}
scrollButtons="on"
tabs={tabs}
/>scrollSize
通过 scrollSize 属性可以控制单次滚动时移动的选项卡个数。默认值为 1。
<ScrollableTabs
value={value}
onChange={handleChange}
scrollSize={2}
tabs={tabs}
/>修改样式
@makeomatic/material-ui-scrollable-tabs 的样式是使用 Material-UI 的风格文件实现的。要自定义样式，可以通过创建自定义主题来实现。
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------------- ------------- - ---- ---------------------------
------ - -------------- - ---- ------------------------------------------
----- ---- - -
- ------ ---- -- --
- ------ ---- -- --
- ------ ---- -- --
- ------ ---- -- --
- ------ ---- -- --
--
----- ----- - ----------------
---------- -
-------- -
----- -
-- ------------------------ -
------------- --
--
-- -------------------- -
---------------- ----------
--
--
--
--
---
------ ------- -------- ----- -
----- ------- --------- - ------------------
----- ------------ - ------- --------- -- -
-------------------
--
------ -
-------------- --------------
---- -------- --------- -------- ------- -- ----- ---
---------------
-------------
-----------------------
-----------
--
-----
-------------------
------
------
----------------
--
-上述代码中，我们首先创建了一个 ThemeProvider，然后根据需要对 MuiTabs-root 样式进行覆盖和修改，来实现自定义样式。
总结
以上就是 @makeomatic/material-ui-scrollable-tabs 的使用教程，希望可以对你理解和学习 Material-UI 相关组件的实现技术有所帮助。通过简单的修改和配置，我们可以轻松地为选项卡组件添加样式和定制功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc9967216659e244615