react material-ui框架中的类名称约定 [英] class name convention in react material-ui framework

问题描述

材料ui库中是否使用了类名约定?我目前正在使用 material-ui-next .我在各处都注意到了像"MuiFormControl-root-124"这样的类名，并在类名后附加了数字.对于纸张元素"MuiPaper-root-18 MuiPaper-shadow2-22 MuiPaper-rounded-19".我只是在这里看不到图案.

Is there a class name convention used in material ui library? I'm currently using material-ui-next. I notice class names like "MuiFormControl-root-124" all over the place with numbers appended to class name. For Paper element "MuiPaper-root-18 MuiPaper-shadow2-22 MuiPaper-rounded-19". I just can't see a pattern here.

有没有我遗漏的约定.如果像Bootstraps网格类那样有意义，则更容易理解该框架.所有帮助，不胜感激.谢谢.

Is there a convention which I'm missing. It would be easier to understand this framework if it made sense like Bootstraps grid classes. All help much appreciated. Thank you.

推荐答案

在material-ui v1中，类名称是在运行时不确定地生成的，因此没有应遵循的约定.在文档的此处中进行了描述:

In material-ui v1, class names are non-deterministically generated at run time, so there is no convention you should adhere to. That's described here in the docs:

您可能已经注意到，我们的样式解决方案生成的类名称是不确定的，因此您不能依靠它们保持不变.

You may have noticed that the class names generated by our styling solution are non-deterministic, so you can't rely on them to stay the same.

但是，这无关紧要，因为首先不要使用原始CSS类名称.而是使用 withStyles 为每个组件设置适当的样式:

However, that does not matter because you should never be using raw CSS class names in the first place. Instead, you use withStyles to set the appropriate styles for each component:

import { withStyles } from 'material-ui/styles';

// Define the CSS styles you which to apply to your component
const styles = {
  root: {
    backgroundColor: 'red',
  },
};

class MyComponent extends React.Component {
  render () {
    // withStyles automatically provides the classes prop, which
    // will contain the generated CSS class name that you can match
    // to your component
    return <div className={this.props.classes.root} />;
  }
}

export default withStyles(styles)(MyComponent);

这些不确定的类名称具有技术优势，包括改进的性能:

These non-deterministic class names have technical benefits, including improved performance:

由于类名的不确定性，我们可以为开发和生产实现优化.它们易于在开发中调试，并且在生产中尽可能短.

Thanks to the non-deterministic nature of our class names, we can implement optimizations for development and production. They are easy to debug in development and as short as possible in production.

您应该注意，发生这种情况是因为material-ui采取了与Bootstrap之类的库完全不同的样式设计方法.虽然Bootstrap有一个CSS库，其中的定义类名称已应用于每个元素，但material-ui使用

You should note that this happens because material-ui takes a fundamentally different approach to styling than a library like Bootstrap. While Bootstrap has a CSS library with defined class names that get applied to each element, material-ui uses CSS in JS to inject styling. This allows CSS to be defined and stored alongside the JavaScript definition of each component.

这篇关于react material-ui框架中的类名称约定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！