Material-UI 类名冲突

Question

我正在构建一个基于 MUI 的组件库，用于多个内部站点，使用 Lerna 来管理本地开发包。我们遇到了一些类名冲突的问题。例如：

MyComponent.jsx

const useStyles = makeStyles(theme => ({
    root: { 
    ...
    }
})

export const MyComponent = props => {
    const classes = useStyles();

    return (
        <div className={classes.root}>
            Hello SO
        </div>
    );
}

import { MyComponent } from 'my-library';

const useStyles = makeStyles(theme => ({
    root: { 
    ...
    }
})

export const MyView = props => {
    const classes = useStyles();

    return (
        <div className={classes.root}> // classes.root === "makeStyles-root-1"
            <MyComponent /> // root class is named "makeStyles-root-1
        </div>
    );

}

由于某些类被名称冲突覆盖，这会导致问题。

Answer 1

将 MUI 移动为仅对等依赖项（而不是 devDep 和对等）解决了该问题。