MUI Cards are not rendering with style

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 = (
    sx={{ display: "inline-block", mx: "2px", transform: "scale(0.8)" }}

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

What the component is supposed to look like: MUI Component

What the component actually looks like: Imported Component

How can I add styling?


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 }}>

Codesandbox Demo