I've tried both Carbon Design for React (@carbon/react) and Material UI (@mui/material) with Next.js and the components are not stylized correctly. They work basically, but I noticed subtle and very notable issues. I decided to forget about IBM's Carbon and am noticing this with @mui:

我已经用Next.js尝试了用于Reaction(@Carbon/Reaction)的Carbon Design(@Carbon/Reaction)和材质UI(@Mui/Material)，但组件的样式设置不正确。它们基本上是有效的，但我注意到了一些微妙而非常值得注意的问题。我决定忘掉IBM的碳排放，在@Mui上注意到了这一点：

• CardHeader is not showing


• Typography and button text colors are black, but I've specified the theme provider to use the dark mode.


• My Sig In button has variant="contained", but its contained style does not apply.

This is the code:

代码是这样的：

'use client';

import { useState } from 'react';
import Image from 'next/image'
import { Box, Container, Card, CardHeader, CardContent, TextField, Typography, Button } from '@mui/material';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

const darkTheme = createTheme({
  palette: {
    mode: 'dark',
  },
});

export default function Home() {
  const [auth, setAuth] = useState<void>(undefined);
  return (
    <ThemeProvider theme={darkTheme}>
      <CssBaseline/>
      <main className="flex flex-col items-center justify-center w-full h-full">
        <Container>
          <Box>
            {auth == null ? <SigIn setAuth={setAuth}/> : null}
          </Box>
        </Container>
      </main>
    </ThemeProvider>
  )
}

type SigInProps = {
  setAuth: (auth: void) => void,
};

function SigIn({setAuth}: SigInProps) {
  return (
    <Card>
      <CardHeader>
        <Typography variant="subtitle1">Subtitle</Typography>
      </CardHeader>
      <CardContent>
        <div className="flex flex-col gap-4">
          <TextField required id="username" label="Username"/>
          <TextField required id="password" type="password" label="Password" autoComplete="current-password"/>
          <Button variant="contained">Sig in</Button>
        </div>
      </CardContent>
    </Card>
  );
}

Result:

结果：

I've posted the issue at GitHub also: https://github.com/mui/material-ui/issues/38901

我也在GitHub上发布了这个问题：https://github.com/mui/material-ui/issues/38901

The issue is your implementation of Tailwind with MUI. Your app's usage of Tailwind's CSS preflight style should be replaced with CSSBaseline. Tailwind base is adding styles that conflict with MUI. (For example, the button color.) You can see the issue partly resolve when you comment out the first line of your globals.css file (@tailwind base;).

问题是您在MUI中实现了TailWind。你的应用程序对TailWind的CSS印前检查样式的使用应该替换为CSSBaseline。顺风基础正在添加与MUI冲突的样式。(例如，按钮颜色。)当您注释掉global als.css文件的第一行时，您可以看到问题在一定程度上得到了解决(@tawind base；)。

From the MUI Tailwind CSS docs:

从MUI TailWind CSS文档：

1. Add Tailwind CSS to your project, following the instructions in
   https://tailwindcss.com/docs/installation.


2. Remove Tailwind CSS's
   preflight style so it can use the Material UI's preflight instead
   (CssBaseline).

From the sound if it, my assumption is that you had a similar issue with Carbon, but I haven't seen your implementation of that.

从声音上看，我的假设是你在碳排放方面也有类似的问题，但我还没有看到你实施了这一点。