reactjs - React Material-UI 框架中的类名约定

Question

Material ui 库中是否使用了类名约定？我目前正在使用material-ui-next 。我注意到像“MuiFormControl-root-124”这样的类名到处都是，并且类名后面附加了数字。对于纸张元素“MuiPaper-root-18 MuiPaper-shadow2-22 MuiPaper-rounded-19”。我只是在这里看不到任何模式。

是否有我缺少的约定。如果这个框架像 Bootstraps 网格类一样有意义，那么理解这个框架会更容易。非常感谢所有帮助。谢谢。

Answer 1

在material-ui v1中，类名是在运行时不确定地生成的，因此没有您应该遵守的约定。描述的是here在文档中:

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为每个组件设置适当的样式:

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);

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

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 使用 CSS in JS注入(inject)造型。这使得 CSS 可以与每个组件的 JavaScript 定义一起定义和存储。