reactjs 如何使用Tailwind设置材质UI对话框的样式？

8fsztsew 于 2022-11-22 发布在 React

关注(0)|答案(5)|浏览(166)

Material UI Dialog 是一个门户组件，我理解它的方式是，它在 React 的 root 元素之外呈现其标记。
它在 </body> 标记之前呈现自身。
现在我因为这个遇到了一个问题。
当用户选择 dark 模式时，我在顶层元素上设置了一个 dark 类，一个在根元素下面。
在所有组件上，我都可以使用 dark variant 来应用样式，如 dark:bg-zinc-700 。
但是当我将它应用于 <Dialog /> 组件时，它不会影响它的样式，尽管我可以看到该类存在于输出中。

<Dialog
    PaperProps={{
        className="dark:bg-zinc-700"
    }}

中的每一个
我应该如何解决这个问题呢？我知道我可以使用 sx 来应用样式。但这意味着我需要失去一致性，而且我也不知道如何将 Tailwind 转换为 sx 。因此我宁愿继续使用 Tailwind 。

reactjs

来源：https://stackoverflow.com/questions/72687360/how-to-style-material-ui-dialog-with-tailwind

5条答案

按热度按时间

kyks70gy1#

@HosseinFallah回顾你的帖子，我认为这是行不通的，因为tailwind和material ui处理黑暗模式的方式不同。然而，你可以不使用sx而将目标指向Material UI css。你可以在你的css中使用Dialog API类，并在全局css中对它们应用tailwind颜色，如下所示：

.MuiDialog-paperScrollBody {
background-color: theme(colors.dark) !important;
}

其中dark是您在tailwind.config.js中设置的自定义深色

赞(0）回复(0）举报 2022-11-22

dw1jzc5e2#

为了补充这个答案，你也可以通过用梅的StyledEngineProvider Package 你的整个应用来设置它。这样，在注入样式时顺风将被优先考虑。
在您的index.tsx中

import { StyledEngineProvider } from '@mui/material';

const container: any = document.getElementById('root');
const root = createRoot(container);

root.render(
    <Provider store={store}>
        <React.StrictMode>
            <StyledEngineProvider injectFirst>
                <App />
            </StyledEngineProvider>
        </React.StrictMode>
    </Provider>
);

则无需指定!important即可执行此操作

<Dialog
    PaperProps={{
        className="dark:bg-zinc-700"
    }}

赞(0）回复(0）举报 2022-11-22

2g32fytz3#

您是否偶然在Tailwind配置（tailwind.config.js）中设置了“important”属性？
如果将其设置为类似“#root”的值，则它将仅匹配#root元素内的元素，当MUI使用React Portals时，将绕过该元素。
您可以将其更改为类似“#tw”的内容，然后将body的ID设置为“tw”，这样它将始终匹配，因为Portals始终是body元素的子元素。

赞(0）回复(0）举报 2022-11-22

mdfafbf14#

如果您与tailwindcss完全互操作，请参见：https://mui.com/material-ui/guides/interoperability/#tailwind-css我认为这个错误发生在tailwindcss.config.js中。通过添加另一个id来 Package 对话框容器并将其分配给“important”属性将解决这个问题