样式不应用于NextJs SSR中不同包中的外部组件

fbcarpbf 于 2023-11-18 发布在其他

关注(0)|答案(2)|浏览(127)

我正在使用一个外部react组件，它被导入到我的nextjs应用程序代码中，这是该组件的外观

<AppBar className={clsx(classes.header)}>
</AppBar>


export const header = makeStyles((theme) => ({
    header: {
        [theme.breakpoints.down('md')]: {
            padding: `0 ${theme.spacing(4)}px`,
        },
    },
})

字符串
但是，当页面在服务器端呈现时，实际的CSS并不应用。
这一切都完美地与客户端渲染aka水化，这是在页面加载到客户端浏览器后完成的，但它只在服务器端渲染与Nextjs，它是失败的

next.js

来源：https://stackoverflow.com/questions/77399412/styles-are-not-applied-to-external-components-from-a-different-package-in-nextjs

2条答案

按热度按时间

uoifb46i1#

最有可能发生的是-你的AppBar组件得到了一个className属性，但它不知道该怎么做。HTML元素确实需要一个className属性来进行样式化，但你必须编写自定义组件来对className做一些事情（比如将className传递给组件中最外面的HTML元素）。
例如，className属性对以下组件没有影响：

export default function AppBar() {
    return (
        <div>
        </div>
    );
}

字符串
但它会对下面的组件产生影响，因为它会将类应用于顶级div：

export default function AppBar({className}) {
    return (
        <div className={className}>
        </div>
    );
}

型
AppBar组件需要正确处理className属性。
编辑：经过进一步的调查，似乎Material UI AppBar组件是一个样式化的组件。我发现以下GitHub gist似乎可以实现您想要的功能：https://gist.github.com/Danilo-Araujo-Silva/2ce11fd0540dcc7eb3ad3e67fd75d02a

赞(0）回复(0）举报 2023-11-18

nukf8bse2#

我看到你正在使用makeStyles，这是一个非常古老和过时的实用程序，来自弃用的@mui/styles包。你是否也在使用React（18+）和/或Next.js（13+）的最新版本？如果是这样，你可能会遇到这些包之间的根本不兼容性。@mui/styles将不会更新以与未来的React版本17兼容。

赞(0）回复(0）举报 2023-11-18

我来回答

样式不应用于NextJs SSR中不同包中的外部组件

2条答案

相关问题

热门标签

最新问答