MUI 卡未按样式呈现

Question

I am importing the Card component from MUI but the component does not have any style.

import * as React from "react";
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import CardActions from "@mui/material/CardActions";
import CardContent from "@mui/material/CardContent";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";

const bull = (
  <Box
    component="span"
    
    sx={{ display: "inline-block", mx: "2px", transform: "scale(0.8)" }}
  >
    •
  </Box>
);

export default function BasicCard() {
  return (
    <Card sx={{ minWidth: 275 }}>
      <CardContent>
        <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
          Word of the Day
        </Typography>
        <Typography variant="h5" component="div">
          be{bull}nev{bull}o{bull}lent
        </Typography>
        <Typography sx={{ mb: 1.5 }} color="text.secondary">
          adjective
        </Typography>
        <Typography variant="body2">
          well meaning and kindly.
          <br />
          {'"a benevolent smile"'}
        </Typography>
      </CardContent>
      <CardActions>
        <Button size="small">Learn More</Button>
      </CardActions>
    </Card>
  );
}

What the component is supposed to look like: MUI Component

What the component actually looks like: Imported Component

How can I add styling?

Answer 1

You probably have text-align: center set somewhere in the parent. This usually happens when you create a react project with a template like CRA that has some CSS files like this :

.App {
  text-align: center;
}

You can fix it by finding and removing that text-align property or reset it in your Card :

<Card sx={{ minWidth: 275, textAlign: "initial" }}>

If what you mean is the dark background, you can achieve it by setting the theme mode to dark:

import { ThemeProvider, createTheme } from "@mui/material/styles";

const theme = createTheme({
  palette: {
    mode: "dark"
  }
});

<ThemeProvider theme={theme}>
  <Card sx={{ minWidth: 275 }}>
    {...}
  </Card>
</ThemeProvider>