Material-UI

Question

我使用 material UI (verison: ^4.12.3) Select，自定义输入。

出于某种原因，prod env Select 输入具有黑色背景，:before 元素具有白色背景。

不知道从哪里来的

这是产品图片：

这是开发者的形象Select:

比较envs Select元素的2 css & html时，发现在prod中添加了一个::before元素，但没有出现在开发中

此外，背景颜色不同。在 prod 中有另一个 class 添加到 InputBase 元素，它在 dev 中不存在。 class 添加黑色背景：

编辑 1

好像MUI注入了<style>。在产品 html 中，我看到了 background-color: black 和 ::before。我会尝试添加索引解决方案，但我的问题不是优先级（我使用的样式会覆盖注入的样式）。此外，它不会帮助 ::before 元素。如何禁用注入的样式？或解决它？

注入不良css:

Answer 1

请参考这个. As answered by user Mordechai。

似乎 webpack 可能会扰乱 MUI 关于 JSS 优先级的规则...这可以通过在 MUI 的方法中添加索引 1 来解决。

//Hook
const useStyles = makeStyles({
    // your styles here
}, {index: 1})

// HOC 
MyComponent = withStyles({
    // your styles here
}, {index: 1})(MyComponent)

Answer 2

向应用程序添加 <StylesProvider /> 包装器修复了它。我们使用微前端基础设施。其中一个前端应用程序也有 makeStyles。这会导致 MUI 中的类名冲突。

在根组件中 <App/>:

import {
  StylesProvider,
  createGenerateClassName
} from '@material-ui/core/styles';

const generateClassName = createGenerateClassName({
  seed: 'app1'
});

const App = () => {
 return (
    <StylesProvider generateClassName={generateClassName}>
       <OtherAppComponents />
    </StylesProvider>
)
}

如果您有超过 2 个，请为每个添加一个提供者和一个生成器，使用不同的种子

Material-UI - 为什么在生产环境和开发环境中显示不同的 css

Material-UI - why different css is shown on prod environment then development env

css

development-environment

production-environment

reactjs