After experimenting with both Carbon Design for React (@carbon/react) and Material UI (@mui/material) in conjunction with Next.js, I encountered styling issues with the components. While they functioned correctly to some extent, there were noticeable discrepancies. Ultimately, I decided to move away from IBM's Carbon and now face similar problems with @mui:
CardHeaderis not being displayed.- The text color of Typography and buttons remains black despite setting the theme provider to use dark mode.
- Even though my Sign In button has
variant="contained", the contained style does not seem to be applied.
Below is the code snippet:
'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">Sign in</Button>
</div>
</CardContent>
</Card>
);
}
Outcome:
https://i.sstatic.net/fDc3i.png
I have also raised this issue on GitHub: https://github.com/mui/material-ui/issues/38901