material-ui_满足Material-UI —您最喜欢的新用户界面库

material-ui

by Code Realm

通过Code Realm

满足Material-UI —您最喜欢的新用户界面库 (Meet Material-UI — your new favorite user interface library)

Update (17/05/2018): Material-UI v1.0.0 is out! Check out this post by Olivier.

更新 (17/05/2018)：Material-UI v1.0.0已发布！ 查看Olivier的这篇文章 。

Huh? Yet another library? What’s wrong with Bootstrap? And why not v0.20?

?？ 还有另一个图书馆？ Bootstrap有什么问题？ 为什么不使用v0.20？

Great questions! Let’s start with a brief introduction. In a nutshell, Material-UI is an open-source project that features React components that implement Google’s Material Design.

好问题！ 让我们从简要介绍开始。 简而言之，Material-UI是一个开源项目，其中包含实现Google的Material Design的 React组件。

It kick-started in 2014, not long after React came out to the public, and has grown in popularity ever since. With over 35,000 stars on GitHub, Material-UI is one of the top user interface libraries for React out there.

它于2014年启动，就在React上市不久之后，并从那时起开始流行 。 Material-UI 在GitHub上拥有35,000多颗星 ，是其中React的顶级用户界面库之一。

Its success didn’t come without challenges though. Designed with LESS, Material-UI v0.x was prone to common CSS pitfalls, such as global scope, which lead the project on the CSS-in-JS trajectory. This is how next came about in 2016.

它的成功并非没有挑战。 Material-UI v0.x是使用LESS设计的，容易出现常见CSS陷阱，例如全局范围，从而导致了该项目沿CSS-in-JS轨迹发展。 这就是next一次在2016年实现的方式。

The journey towards better style, as Olivier Tassinari puts it, began with inline styles, but their suboptimal performance and limited feature support (think pseudo selectors or media queries), ultimately made the team transition to JSS. And boy did they make a smart choice.

正如Olivier Tassinari所说， 向更好的风格发展的过程是从内联风格开始的，但是由于性能欠佳且功能支持有限(请考虑使用伪选择器或媒体查询)，最终使团队过渡到了JSS 。 男孩，他们做了一个明智的选择。

v1版本的炒作是什么？ (What’s the hype with the v1 release?)

It’s bad-ass. Not only does it address the problems inherent with LESS, but it also unlocks a ton of terrific features, including

坏蛋 它不仅解决了LESS固有的问题，而且还解锁了许多很棒的功能，包括

• dynamic styles generated at runtime
  运行时生成的动态样式
• nested themes with intuitive overrides
  嵌套主题具有直观的覆盖
• reduced load time with code splitting
  通过代码拆分减少了加载时间

And many more. The library is also mature enough to be used in production So much so that the team suggests v1 for all new projects going forward.

还有更多 。 该库还足够成熟，可以在生产中使用，以至于团队为所有新项目建议v1。

好吧，我们要构建一个应用程序，还是什么？ (Alright, are we gonna build an app, or what?)

Glad you asked! For this demo, we’ll build a simple fitness app. Everyone is bored of to-do apps by now anyway, right?

很高兴你问！ 对于此演示，我们将构建一个简单的健身应用程序。 无论如何，现在每个人都无聊的待办事项吧？

Reading is great and all, but watching is often more fun! Check out this playlist I made on YouTube if you want to build a more advanced app.

读书很棒，但看书通常更有趣！ 如果您想构建更高级的应用，请查看我在YouTube上制作的此播放列表。

好吧，你让我相信了。 我该如何开始？ (Ok, you got me convinced. How do I get started?)

We’ll first bootstrap our app with create-react-app

我们将首先使用create-react-app引导我们的应用程序

create-react-app mui-fitnesscd mui-fitnesscode .

那么Material-UI呢？ (And what about Material-UI?)

If you have yarn, the installation is as simple as

如果您有纱线，安装过程很简单

yarn add @material-ui/core

Otherwise, with npm

否则，使用npm

npm i @material-ui/core

Not long ago, we would specify@next tag to pull in the latest pre-release (for example, it might have looked like v1.0.0-beta.47). Now that both v1 and v0.x are under material-ui scope, we need to reference the core of the library with /core to target the latest release. Don’t miss that last part, or else you’ll end up with the stable0.20 dependency!

不久前，我们将指定@next标记以@next最新的预发行版(例如，它看起来可能像v1.0.0-beta.47 )。 现在v1和v0.x都在material-ui范围内，我们需要使用/core引用库的/core以定位最新版本。 不要错过最后一部分，否则您将获得稳定的0.20依赖！

等等，真的吗？ (Wait, is that really it?)

Almost! One last thing is fonts. We’ll go with the recommended Roboto Font from Google’s CDN:

几乎！ 最后一件事是字体。 我们将使用Google CDN推荐的Roboto字体 ：

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">

Alternatively, you can pull it in from NPM with

另外，您可以使用

yarn add typeface-roboto# or npm i typeface-roboto

in which case, you’ll need to have an import at the root of your project

在这种情况下，您需要在项目的根目录下进行导入

// Make sure you only load 300, 400, & 500 font weights though!import 'typeface-roboto'

做完了！ 我下一步该怎么办？ (Done! What do I do next?)

Well, let’s refactor our App.js component before we go any further

好吧，让我们重构App.js组件，然后再进行下一步

import React, { Component } from 'react'

export default class App extends Component {  state = {    exercises: [],    title: ''  }

render() {    return <h1>Exercises</h1>  }}

And why not clean up index.js while we’re at it?

而且为什么不清理我们正在使用的index.js ？

import React from 'react'import { render } from 'react-dom'import App from './App'

render(<App />, document.getElementById('root'))

Feel free to remove the remaining files under src, as we won’t need them.

请随意删除src下的剩余文件，因为我们不需要它们。

Material-UI进入哪里？ (Where does Material-UI come in?)

Fair enough, it’s time to see it in action. Let’s change the ugly h1 to a beautiful Typography heading:

公平地说，是时候来看一下它了。 让我们将丑陋的h1更改为漂亮的Typography标题：

import Typography from '@material-ui/core/Typography'

...

render() {    return (      <Typography variant='display1' align='center' gutterBottom>        Exercises      </Typography>    )  }}

Note that since v1.0.0-rc.0, MUI moved to @material-ui/core and the import path was flattened. This was the last breaking change in the pre-release.

请注意，从v1.0.0-rc.0开始，MUI移至@material-ui/core ，并且导入路径已展平 。 这是预发行版中的最后一项重大更改 。

Then go ahead and run yarn start to see the magic.

然后继续运行并yarn start查看魔术。

We’re on to a good start! Typography component comes with a pre-defined set of type sizes. Other variants include body1, title, display2, and so on. Among other built-in props are align which we use here to center the text horizontally, and gutterBottom which adds a bottom margin.

我们有一个良好的开端！ Typography组件随附一组预定义的Typography 大小 。 其它variant小号包括body1 ， title ， display2 ，依此类推。 除了其他内置道具外，我们在这里使用align可以使文本水平居中，还有gutterBottom可以增加底部边距。

Why don’t we expand this to a form, so we can create our own exercises? We’ll start with a TextField and bind it to the title on the state

为什么不将其扩展为某种形式，以便我们可以创建自己的练习？ 我们将从TextField开始并将其绑定到状态上的title

import Typography from '@material-ui/core/Typography'import TextField from '@material-ui/core/TextField'

...

handleChange = ({ target: { name, value } }) =>    this.setState({      [name]: value    })

render() {    const { title } = this.state    return (      ...      <form>        <TextField          name='title'          label='Exercise'          value={title}          onChange={this.handleChange}          margin='normal'        />      </form>    )  }}

Of course, we’d need to make React happy by wrapping Typography and form with a parent element. What could be a better opportunity for a paper-sheet card-like background? Let’s reach out to Paper then

当然，我们需要通过包装Typography和带有父元素的form使React感到高兴。 对于像纸卡这样的背景，有什么更好的机会？ 那我们就去Paper

import Paper from '@material-ui/core/Paper'

...

render() {      const { title } = this.state      return <Paper>        ...      </Paper>    }  }}

It’s also about time to start using named imports (assuming our Webpack setup allows for tree shaking):

现在也该开始使用命名的导入了(假设我们的Webpack设置允许摇晃树)：

import { Paper, Typography, TextField } from '@material-ui/core'

Sweet! And what good is a form without the submit button? Buttons are a staple component in Material-UI; you’ll see them everywhere. For instance,

甜！ 没有提交按钮的表单有什么好处？ Button s是Material-UI中的订书钉组件； 您到处都会看到它们。 例如，

import {  Paper,  Typography,  TextField,  Button } from '@material-ui/core'...        <Button          type='submit'          color='primary'          variant='raised'        >          Create        </Button>      </form>    </Paper>  }}

It should read well. type is a regular React prop, color and variant are Material-UI-specific, and make up a rectangle-shaped button. Another variant would be fab for a floating button, for example.

它应该读得很好。 type是常规的React道具， color和variant是Material-UI特定的，并组成一个矩形按钮。 例如，另一个变体是用于浮动按钮的fab 。

It doesn’t do much though. We’ll have to intercept the form submit event

它并没有做太多。 我们必须拦截表单提交事件

return <Paper>      ...      <form onSubmit={this.handleCreate}>        ...      </form>    </Paper>  }}

and then handle it with

然后用

handleCreate = e => {    e.preventDefault()

if (this.state.title) {      this.setState(({ exercises, title }) => ({        exercises: [          ...exercises,          {            title,            id: Date.now()          }        ],        title: ''      }))    }  }

Whoa! What’s that cryptic code all about? Very quickly, we

哇！ 那是什么秘密代码？ 很快，我们

1. Prevent the default page reload
   防止默认页面重新加载

2. Check if the title field is non-empty

   检查title字段是否为非空

3. Set the state with an updater function to mitigate async updates

   使用更新程序功能设置状态以减轻异步更新

4. Destructure exercises and title off the prevState object

   prevState exercises并关闭prevState对象的title

5. Spread out the exercises on the next state with a new exercise object

   摊开exercises上的下一个状态，一个新的练习对象

6. Reset the title to clear out the input field

   重置title以清除输入字段

Guess I should have mentioned that I’m in love with ES6 too. Aren’t we all?

猜猜我应该提到我也爱过ES6。 我们不是吗？

但是我们如何列出它们呢？ (But how do we list them?)

Now is the right time to. Is there a list component? Of course, you silly goose!

现在是时候了。 有列表组件吗？ 当然，你这傻傻的鹅！

Inside a List, we’ll loop through our exercises and return a ListItem with some ListItemText for each

里面一个List ，我们将通过循环exercises ，并返回一个ListItem一些ListItemText每个

import { List, ListItem, ListItemText } from '@material-ui/core'

...

render() {    const { title, exercises } = this.state    return <Paper>          ...      <List>        {exercises.map(({ id, title }) =>          <ListItem key={id}>            <ListItemText primary={title} />          </ListItem>        )}      </List>    </Paper>  }}

Let’s also hard-code a few initial exercises to get something on the screen. You guessed it, the trinity of all weight lifting workouts, ladies and gents:

我们还要对一些初始练习进行硬编码，以在屏幕上显示一些内容。 您猜对了，所有举重锻炼(女士和女士)的三位一体：

state = {    exercises: [      { id: 1, title: 'Bench Press' },      { id: 2, title: 'Deadlift' },      { id: 3, title: 'Squats' }    ],    title: ''  }

Last but not least, our users are likely to make typos, so we better add a delete button next to each exercise, so they could remove entries they no longer want in their list.

最后但并非最不重要的一点是，我们的用户很可能会打错字，因此我们最好在每个练习旁边添加一个删除按钮，以便他们可以删除列表中不再需要的条目。

We can use ListItemSecondaryAction to do exactly that. Placed on the far right of the list item, it can hold a secondary control element, such as an IconButton with some action

我们可以使用ListItemSecondaryAction做到这一点。 它位于列表项的最右边，可以容纳辅助控件元素，例如带有某些操作的IconButton

import {  /*...*/,  ListItemSecondaryAction,  IconButton} from '@material-ui/core'

...

<ListItem key={id}>            <ListItemText primary={title} />            <ListItemSecondaryAction>              <IconButton                color='primary'                onClick={() => this.handleDelete(id)}              >                {/* ??? */}              </IconButton>            </ListItemSecondaryAction>          </ListItem>

...

And let’s not forget the delete handler as well:

而且，我们不要忘记删除处理程序：

handleDelete = id =>    this.setState(({ exercises }) => ({      exercises: exercises.filter(ex => ex.id !== id)    }))

which will simply filter our exercises down to those that don’t match the id of the one that needs to be removed.

这只会将我们的练习过滤为与需要删除的id不匹配的那些。

按钮内可以有一个垃圾桶图标吗？ (Can we have a trash bin icon inside the button?)

Yes, that would be great! Though you could use Material Icons from Google’s CDN directly with either Icon or SvgIcon components, it’s often preferable to go with a ready-made preset.

是啊，那样最好了！ 尽管您可以直接将Google CDN中的Material Icons与Icon或SvgIcon组件一起使用，但通常最好使用现成的预设。

Luckily, there’s a Material-UI package for those

幸运的是，有一个针对这些用户的Material-UI 程序包

yarn add @material-ui/icons# or npm i @material-ui/icons

It exports 900+ official material icons as React components, and the icon names are nearly identical, as you’ll see below.

它将900多个官方材料图标导出为React组件，并且图标名称几乎相同，如下所示。

Let’s say we wanted to add a trash icon. We’d first head over to material.io/icons to find out its precise name

假设我们要添加垃圾桶图标。 我们首先去material.io/icons找出确切的名字

Then, we turn that name into PascalCase in our import path

然后，在导入路径中将该名称转换为PascalCase

import Delete from '@material-ui/icons/Delete'

Just like with Material-UI components, if your setup has tree-shaking enabled, you could shorten the import to

就像Material-UI组件一样，如果您的设置启用了摇树功能，则可以将导入时间缩短为

import { Delete } from '@material-ui/icons'

which is especially useful when importing several icons at once.

一次导入多个图标时特别有用。

Now that we have our trash icon, let’s display it inside our delete button

现在我们有了垃圾桶图标，让我们在“删除”按钮中显示它

<IconButton color='primary' onClick={() => this.handleDelete(id)}>  <Delete /></IconButton>

如何使表格看起来不那么难看？ (How can I make the form look less ugly?)

Ah, styling. I thought you’d never ask! A gentle touch of CSS wouldn’t hurt. So then, do we import an external stylesheet with global styles? Or, perhaps, use CSS modules and assign scoped class names to our elements? Not quite.

啊，造型。 我以为你永远不会问！ 轻柔地使用CSS不会感到伤害。 那么，我们是否可以导入具有全局样式的外部样式表？ 或者，也许使用CSS模块并为我们的元素分配作用域类名？ 不完全的。

Under the hood, Material-UI forks a CSS-in-JS library known as react-jss.

在幕后，Material-UI派生了一个CSS-in-JS库，称为react-jss 。

It’s a React integration of the JSS library by the same author, Oleg Isonen. Remember we touched on it in the beginning? Its basic idea is to enable you to define styles in JavaScript. What makes JSS stand out among other libs though, is its support for SSR, small bundle size, and rich plugin support.

这是同一作者Oleg Isonen的JSS库的React集成。 还记得我们在一开始就谈到它吗？ 其基本思想是使您能够在JavaScript中定义样式。 但是，使JSS在其他库中脱颖而出的原因是它对SSR的支持，小捆绑包的大小以及丰富的插件支持。

Let’s give it a try! In our App component, create a styles object just like you would with inline styles. Then, come up with a key, for instance root, referring to the root Paper element, and write out some styles in camelCase

试一试吧！ 在我们的App组件中，就像使用内联样式一样，创建一个样式对象。 然后，拿出一个键，例如root ，引用根Paper元素，并在camelCase中写出一些样式

const styles = {  root: {    margin: 20,    padding: 20,    maxWidth: 400  }}

Next, import withStyles HOC from material-ui

接下来，从material-ui导入withStyles HOC

import { withStyles } from '@material-ui/core/styles'

and wrap the App component with it, passing styles object as the arg

并使用它包装App组件，将styles对象作为arg传递

export default withStyles(styles)(  class App extends Component {    ...  })

Note that you could also use withStyles HOC as a decorator. Keep in mind that create-react-react doesn’t support decorators out of the box yet, so if you insist on using them, you’d need to eject or fork to tweak the config.

注意，您也可以将withStyles HOC用作装饰器 。 请记住，create-react-react 还不支持装饰器 ，因此，如果您坚持使用装饰器 ，则需要弹出或分叉来调整配置。

This will inject a classes prop into App containing a dynamically-generated class name for our root element

这会将classes支持注入到App其中包含我们root元素的动态生成的类名

The class name is guaranteed to be unique, and it will often be shortened in a production build. We then assign it to Paper via className attribute

该类名保证是唯一的，并且在生产版本中通常会缩短。 然后，我们通过className属性将其分配给Paper 。

render() {      const { title, exercises } = this.state      const { classes } = this.props

return <Paper className={classes.root}>        ...      </Paper>    }

How does this magic work? Turns out, withStyles is responsible for the dirty work. Behind the scenes, it injected an array of styles into the DOM under <style> tags. You could spot them if you dig into the <head> with dev tools

这个魔术如何运作？ 事实证明， withStyles负责肮脏的工作。 在幕后，它在<sty le>标记下向DOM中注入了一系列样式。 如果使用开发工具o the <head>进行挖掘，则可以发现它们

You could also see other style tags related to native components, such as MuiListItem for the ListItem component we imported earlier. Those are auto-injected on demand, for each given UI element that you import.

您还可以看到与本机组件相关的其他style标签，例如我们之前导入的ListItem组件的MuiListItem 。 对于您导入的每个给定的UI元素，这些都将按需自动注入。

That means that Material-UI will never load any styles for the components that we don’t use. Hence, increased performance and faster load times. This is very different from Bootstrap, which requires loading the entire monolithic CSS bundle, whether you happen to use its vast assortment of classes or not.

这意味着Material-UI将永远不会为我们不使用的组件加载任何样式 。 因此，提高了性能并缩短了加载时间。 这与Bootstrap有很大的不同， Bootstrap要求加载整个整体式CSS捆绑包，而无论您是否恰巧使用了其大量的类。

Let’s also style the form so it looks neat

让我们也对表单进行样式设置，使其看起来很整洁

const styles = {  root: {    ...  },  form: {    display: 'flex',    alignItems: 'baseline',    justifyContent: 'space-evenly'  }}

This will make the text field and the button nicely spaced out. Feel free to refer to align-items and justify-content at CSS-Tricks should you need any further clarification on the Flexbox layout.

这将使文本字段和按钮很好地隔开。 如果您需要对Flexbox布局进行任何进一步的说明，请随时在CSS-Tricks上引用align-items和justify-content 。

当然可以，但是主题如何呢？ (Sure, but what’s up with theming then?)

withStyles HOC is tailored for customizing a one-off component, but it’s not suited for application-wide overwrites. Whenever you need to apply global changes to all components in Material-UI, your first instinct would be to reach out to the theme object.

withStyles HOC是为定制一次性组件而量身定制的，但不适用于应用程序范围的覆盖。 每当您需要对Material-UI中的所有组件应用全局更改时，您的第一个直觉就是接触theme对象。

Themes are designed to control colors, spacing, shadows, and other style attributes of your UI elements. Material-UI comes with built-in light and dark theme types, light being the default.

主题旨在控制UI元素的颜色，间距，阴影和其他样式属性。 Material-UI带有内置的浅色和深色主题类型，浅色是默认设置。

If we turn our styles into an anonymous function, it will receive the theme object as an arg, so we can inspect it

如果我们将styles转换为匿名函数，它将以arg的形式接收theme对象，因此我们可以对其进行检查

const styles = theme => console.log(theme) || ({  root: ...,  form: ...})

The way you customize your theme is through configuration variables, like palette, type, typography, etc. To have a closer look at all the nested properties and options, visit the Default Theme section of the Material-UI docs.

定制主题的方式是通过配置变量 (例如palette ， type ， typography等)。要仔细查看所有嵌套的属性和选项，请访问Material-UI文档的Default Theme部分。

Let’s say we wanted to change the primary color from blue to orange. First off, we need to create a theme with createMuiTheme helper in index.js

假设我们要将原色从blue更改为orange 。 首先，我们需要在index.js使用createMuiTheme帮助器创建一个主题

import { createMuiTheme } from '@material-ui/core/styles'

const theme = createMuiTheme({ /* config */ })

In Material-UI, colors are defined under the palette property of theme. The color palette is subdivided into intentions which include primary, secondary, and error. To customize an intention, you can simply provide a color object

在Material-UI中，颜色是在theme的palette属性下定义的。 调色板细分为意图，包括primary ， secondary和error 。 要自定义意图，您只需提供一个颜色对象

import { orange } from '@material-ui/core/colors'

const theme = createMuiTheme({  palette: {    primary: orange  }})

When applied, the color will then be calculated for light, main, dark, and contrastText variations. For more granular control though, you could pass in a plain object with any of those four keys

应用后，将针对light ， main ， dark和contrastText Text变化计算颜色。 但是，为了进行更精细的控制，您可以使用这四个键中的任何一个来传递普通对象

const theme = createMuiTheme({  palette: {    primary: {      light: orange[200] // same as '#FFCC80',      main: '#FB8C00', // same as orange[600]      dark: '#EF6C00',      contrastText: 'rgb(0,0,0)'    }  }})

As you can see, individual colors can be expressed as both a hex or rgba string (#FFCC80) and a hue/shade pair (orange[200]).

如您所见，各个颜色可以表示为十六进制或rgba字符串( #FFCC80 )和色调/阴影对 ( orange[200] )。

Creating a theme on its own won’t suffice. To overwrite the default theme, we would need to position MuiThemeProvider at the root of our app and pass our custom theme as a prop

仅靠创建主题是不够的。 要覆盖默认主题，我们需要将MuiThemeProvider在应用程序的根目录下，并将自定义theme作为道具

import { /*...*/, MuiThemeProvider } from '@material-ui/core/styles'

const theme = createMuiTheme({  palette: {    primary: orange  }})

render(  <MuiThemeProvider theme={theme}>    <App />  </MuiThemeProvider>,  document.getElementById('root'))

MuiThemeProvider will then pass down the theme to all its child elements through React context.

然后， MuiThemeProvider将通过React上下文将theme传递给其所有子元素。

Though it may seem like a lot of work to change a color, keep in mind that this overwrite will propagate to all components nested under the provider. And apart from colors, we can now fine-tune viewport sizes, spacing, opacity, and many other parameters.

尽管更改颜色似乎需要很多工作，但是请记住，这种覆盖将传播到嵌套在提供程序下的所有组件。 除了颜色之外，我们现在还可以微调视口的大小，间距，不透明度和许多其他参数。

Utilizing config variables when styling your components will aid with consistency and symmetry in your app’s UI. For example, instead of hard-coding magic values for margin and padding on our Paper component, we could instead rely on the spacing unit off the theme

在设计组件样式时使用配置变量将有助于在应用程序UI中保持一致性和对称性。 例如，而不是硬编码的魔法值， margin和padding我们的Paper组件，我们可以而是依靠间隔单元上落主题

const styles = ({ spacing: { unit } }) => ({  root: {    margin: unit,    padding: unit * 3,    maxWidth: 400  },  form: ...}

theme.spacing.unit comes at 8px by default, but if it’s used uniformly across the app, when we need to update its value, rather than scavenging across the entire codebase, we only need to change it in one place, that is, in our options object that we pass to createMuiTheme.

theme.spacing.unit默认情况下为8px ，但是如果在应用程序中统一使用它，则当我们需要更新其值时，而不是在整个代码库中进行清理时，我们只需要在一个位置进行更改，即我们传递给createMuiTheme options对象。

Theme variables are plentiful, and if you run into a use case that’s not covered by the built-in theme object, you could always define your own custom vars. Here’s a slightly modified version of our fitness app that showcases color palette, theme type, and spacing unit options

主题变量很多，如果遇到内置主题对象未涵盖的用例，则始终可以定义自己的自定义var 。 这是我们健身应用程序的略微修改版本，其中展示了调色板，主题类型和间距单位选项

Note that the example above is only a demo. It re-creates a new theme each time an option changes, which leads to a new CSS object being re-computed and re-injected into the DOM. Most often than not, your theme config will remain static.

请注意，上面的示例只是一个演示。 每次选项更改时，它都会重新创建一个新主题，从而导致一个新CSS对象被重新计算并重新注入到DOM中。 通常，您的主题配置将保持静态。

There are far more interesting features that we haven’t covered. For example, Material-UI comes with an opt-in CssBaseline component that applies cross-browser normalizations, such as resetting margins or font family (very much like normalize.css does).

我们还没有涵盖更多有趣的功能。 例如，Material-UI随附有一个可选的CssBaseline组件，该组件应用跨浏览器的规范化，例如重置页边距或字体系列(与normalize.css非常相似)。

As far as components go, we have our standard Grid with a 12-column layout and five viewports (xs, sm, md, lg, and xl). We’ve also got familiar components like Dialog, Menu, and Tabs, as well as elements, such as Chip and Tooltip. Indeed, there’s a whole slue of others, and fortunately, they are all very-well documented with runnable demo code from CodeSandbox

就组件而言，我们的标准Grid具有12列布局和五个视口( xs ， sm ， md ， lg和xl )。 我们还拥有熟悉的组件，例如Dialog ， Menu和Tabs ，以及元素，例如Chip和Tooltip 。 确实，还有很多其他方面，幸运的是，它们都很好地被CodeSandbox的可运行演示代码记录了下来。

Aside from that, Material-UI Next also works with SSR, if you’re into that. Besides, although it comes with JSS out of the box, it can me made to work with just about any other library, like Styled Components, or even raw CSS.

除此之外，如果您对此感兴趣 ，那么Material-UI Next也可以与SSR一起使用。 此外，尽管它是JSS的现成产品，但我可以使其与几乎任何其他库一起使用 ，例如Styled Components甚至是原始CSS。

Be sure to check out the official docs for more info.

请务必查看官方文档以获取更多信息。

I hope you found this read useful! And if you like it so much that you are excited to learn more about Material-UI or React, then check out my YouTube channel maybe?

希望您觉得这篇文章有用！ 并且，如果您如此喜欢它，以至于能够兴奋地学习有关Material-UI或React的更多信息，那么可以查看我的YouTube频道吗？

Thanks for stopping by! And big thanks to the team over at Call-Em-All and all the backers who helped to build this awesome library ❤️

感谢您的光临！ 非常感谢Call-Em-All的团队以及所有帮助构建这个很棒的库的支持者❤️

Cheers,

干杯，

Alex

亚历克斯

翻译自: https://www.freecodecamp.org/news/meet-your-material-ui-your-new-favorite-user-interface-library-6349a1c88a8c/

material-ui