如何在外部 CSS 中使用 MUI 主题答案

【问题标题】：How to use MUI theming in external CSS如何在外部 CSS 中使用 MUI 主题
【发布时间】：2022-11-17 12:43:14
【问题描述】：

目前，我的应用程序利用来自 MUI 的 in-file styling（即 styled）来自定义组件，同时合并 MUI 主题。但是，我想将我的 CSS 自定义移动到外部 CSS 样式表并导入它，而不是将所有 HTML 和 CSS 放在一个文件中。这可能吗？我还没有找到任何方法来做到这一点。

例如，自定义组件可以是：

const ProfileWrapper = styled('div')(({ theme }) => ({
    display: 'flex',
    alignItems: 'center',
    padding: theme.spacing(0, 3),
     boxShadow: theme.customShadows.z8,
    [theme.breakpoints.up('md')]: {
        padding: theme.spacing(0, 5)
    }
}));

但是，我不确定如何在 .css 文件中执行 [theme.breakpoints.up('md')] 并将其导入并将其用作组件的类名。

【问题讨论】：

标签： material-ui

【解决方案1】：

这是不可能的，因为主题是 React 元素而不是 css。

请参阅此处了解在 MUI 中组织样式的所有方法 https://mui.com/material-ui/customization/how-to-customize/

我个人将所有样式化组件保存在一个单独的文件中。

【讨论】：