如果 MUI 样式被全局设置覆盖，如何强制执行 MUI 样式？

Question

我正在开发一个 React 组件，类似于测验，它将被插入到客户的网页中。我显然在他们网站的样式表中没有任何发言权，也无能为力，就是这样。所以我想知道是否有办法在 MUI 组件上强制执行 Material UI？

示例：

这是我的开发版本。

这是在生产版本中，在我客户的网站上。他们有一个全局设置，即覆盖这个设置。具体来说，他们的目标是 input[type="email"]，这给我带来了麻烦。

所以我在这里问是否有办法强制执行 MUI 样式。

Answer 1

向您的 className 输入添加一个 Material UI 道具，例如 className="email-input" 然后创建一个 css 文件添加该 className 并向其添加高度、宽度和其他样式你想要的，就像你在普通的 html 文件中做样式然后将它导入你的 React 组件文件一样。

当您将项目添加到客户网站时，css 文件将在他们网站的 css 之后加载，因此您的样式将覆盖他们的样式。

快乐黑客！