Блог

Я импортирую Card компонент из MUI, но у компонента нет никакого стиля.

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

 

Как должен выглядеть компонент:
Компонент MUI

Как на самом деле выглядит компонент: Импортированный компонент

Как я могу добавить стиль?

Вероятно, вы text-align: center установили где-то в родительском файле. Обычно это происходит, когда вы создаете проект react с шаблоном, подобным CRA, который содержит несколько CSS-файлов, подобных этому:

 .App {
  text-align: center;
}
 

Вы можете исправить это, найдя и удалив это text-align свойство или сбросив его в своем Card :

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

Если вы имеете в виду темный фон, вы можете добиться этого, установив режим темы на темный:

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

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

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