前言
material-ui 是一个流行的 React UI 框架，提供了丰富的基础组件和风格，适合快速构建漂亮的前端界面。而在 material-ui 的基础上，material-ui-19 包深受许多前端开发者的喜爱，它将 Google Material Design 样式的复古版本为主题进行了升级，同时提供了更多的定制化选项，并且兼容了 React 16 以及更早的版本。在本文中，我们将讲解如何使用 material-ui-19 包来提升你的前端开发效率。
安装
前往你的项目根目录，在终端中输入以下命令进行安装：
npm install material-ui-19
或者使用 yarn：
yarn add material-ui-19
基础组件
material-ui-19 与 material-ui 相比，提供了更多的基础组件和新的主题定制方式。下面是一些常用的基础组件：
Button
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ------------------------
-------- ---------- -
------ -
------- ------------------ ------------------
----- --
---------
--
-TextField
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- ---------------------------
-------- ------------- -
------ -
----------
------------------
-------------
------------
--------------------
--
--
-Typography
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- ----------------------------
-------- -------------- -
------ -
----------- ------------ ----------------
------ ------
-------------
--
-Grid
-- -------------------- ---- -------
------ ----- ---- --------
------ ---- ---- ----------------------
------ ----- ---- -----------------------
-------- -------- -
------ -
----- --------- ------------
----- ---- ------- -------
----------- ---- ---------
-------
----- ---- ------- -------
----------- ---- ---------
-------
-------
--
-主题定制
material-ui-19 采用 JSS（CSS in JS）的方式来进行主题定制，让你可以更加灵活地控制组件的样式。下面是一个基本的主题配置：
-- -------------------- ---- -------
------ - -------------- - ---- ------------------------
----- ----- - ----------------
-------- -
-------- -
----- ----------
--
---------- -
----- ----------
--
--
---创建主题的方式类似于创建 Redux 的 store，使用 createMuiTheme 函数来创建一个主题对象，其中包含了组件样式配置，例如这里我们将 primary 颜色设置为 F44336（红色），secondary 颜色设置为 00B0FF（蓝色）。
然后在根组件外层添加 ThemeProvider 组件，将主题传递给它，这样整个应用中的所有组件都可以使用这个主题：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- - ---- ------------------------
------ - -------------- - ---- ------------------------
------ ------ ---- ------------------------
----- ----- - ----------------
-------- -
-------- -
----- ----------
--
---------- -
----- ----------
--
--
---
-------- ----- -
------ -
-------------- --------------
------- ------------------- ----------------
------ ------
---------
----------------
--
-在这个示例中，我们将主题传递给了 ThemeProvider 组件，然后在一个普通的 Button 组件中使用主题中定义的 primary 颜色。通过这种方式，我们可以在应用程序中轻松使用主题。
自定义组件
在 material-ui-19 中，你可以使用 withStyles 函数来创建自定义样式的组件。这个函数的作用是将组件的类名和样式对象进行绑定，并返回一个新的组件。下面是一个简单的例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- ------------------------
------ ------ ---- ------------------------
----- ------ - -
----- -
------ ----------
----------- ----------
------------- --
---------- -
----------- ----------
--
--
--
-------- --------------- -
----- - ------- - - ------
------ -
------- ---------- ----- ------------ ---
----- --
---------
--
-
------ ------- -----------------------------在这个示例中，我们使用 withStyles 函数来创建了一个新的组件 MyButton，将 styles 对象作为参数传递给它。在 styles 对象中，我们定义了一些按钮组件的样式，然后将它们与 root 类名进行关联。最后在组件中使用 classes 属性传递样式给 Button 组件。
使用 withStyles 函数可以轻松地创建自定义样式的组件，它非常适合于需要频繁使用的组件或带有特定样式的组件。
结语
material-ui-19 是一个非常优秀的 UI 框架，不仅提供了许多基础组件和主题样式，还支持自定义组件和样式。在本篇文章中，我们介绍了基础组件的使用，主题配置的方法以及如何自定义组件与样式。相信通过学习本文，你可以更好地理解 material-ui-19 包的使用方法，并将它应用到你的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fd081e8991b448dd590