Material-UI class 名称冲突

Question

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

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

}

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

Answer 1

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

Material-UI class 名称冲突

Material-UI class name collisions

material-ui

lerna