Material-ui v4在html DOM类属性中显示组件名称? [英] Material-ui v4 shows component names in html DOM class attributes?

问题描述

从material-ui v3迁移到v4后，在HTML内部的class属性中注意到了react组件/函数名称.

这是预期的吗?在尝试使用不适用的新样式进行覆盖时，这可能会以某种方式影响覆盖已注意到的问题的类属性.

还有可能删除那些内容吗?

组件名称包括:WrapperComponent，withRouter，CustomerDetailsContainer等.

解决方案

材料UI使用

After migrating from material-ui v3 to v4, noticed the react component/function name in the class attribute inside the HTML.

Is that expected? Might this somehow affect overriding class properties already noticing issues when trying to override with new styles which do not apply.

Also is there a possibility to remove those?

The component names are: WrapperComponent, withRouter, CustomerDetailsContainer among others.

解决方案

Material-UI uses class name generator to generate unique class names for styled components to enable style isolation. The classname prefix is different depending on the current environment.

• In non-production mode, the displayed name of the component is used as classname prefix
• In production mode, by default jss is used as classname prefix

You can fake the environment by setting process.env.NODE_ENV at the beginning of the program to see the change in classname prefix

// change to "production" to see the different in classname prefix
process.env.NODE_ENV = "development";

class App extends React.Component {
  static displayName = "MyFabulousApp";

  render() {
    const { classes } = this.props;
    return <div className={classes.root}>Hello world</div>;
  }
}

const styles = {
  root: {
    backgroundColor: "grey"
  }
};

const AppWithRouter = withRouter(App);
const MyApp = withStyles(styles)(AppWithRouter);

console.log(AppWithRouter.displayName); // withRouter(MyFabulousApp)-root-1

Generated class name of the element in development

withRouter(MyFabulousApp)-root-1

In production

jss1

Live Demo

这篇关于Material-ui v4在html DOM类属性中显示组件名称?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！