Saya mencoba menata Tipografi dari Material UI dengan file CSS tetapi gaya yang saya lakukan tidak diterapkan ke situs web Bereaksi saya. Bantuan apa pun akan sangat dihargai!

Saya ingin menata Tipografi dengan className ".title-card", dan di bawah ini Anda akan menemukan file js dan css yang sesuai

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
import ButtonBase from '@material-ui/core/ButtonBase';
import stockPhoto from '../images/home-stock-image.png';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import { CardHeader } from '@material-ui/core';
import '../styling/SmallCard.css'


const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  paper: {
    padding: theme.spacing(2),
    margin: 'auto',
    maxWidth: 500,
  },
  image: {
    width: 128,
    height: 128,
  },
  img: {
    margin: 'auto',
    display: 'block',
    maxWidth: '100%',
    maxHeight: '100%',
  },
  //having trouble setting dimensions of card
  style: 
    {minWidth: "5000px", margin: '12px'},

}));

var cardStyle = {
  width: '424px',
  height: '466px',
  left: '64px',
  top: '761px'

}

export default function SmallCard({submission}) {
  const classes = useStyles();
  return (
    <div>

      { /*{submission.title}*/ }
      <Card style={cardStyle}>
        <CardMedia
            component="img"
            alt="Contemplative Reptile"
            height="180"
            image={stockPhoto}
            title="Contemplative Reptile"
          />
          <CardContent>
          <Typography className=".title-card"  gutterBottom variant="h5" component="h2">
            London, England
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
          3 Apr 1944
          </Typography>
        </CardContent>

      </Card>
    </div>
    
  );
}
.title-card {
    font-family: Open Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 33px;
}

Saya ingin menerapkan perubahan font dan teks yang sesuai tetapi tidak diterapkan

0
fabio contreras 12 Mei 2021, 21:16

2 jawaban

Jawaban Terbaik

Keluarga font dengan spasi harus dikutip:

font-family: "Open Sans";

Perbaiki juga kesalahan ketik Anda:

<Typography className=".title-card

Hapus titik.

2
Bhojendra Rauniyar 12 Mei 2021, 18:19

Hapus . dari className=".title-card":

<Typography className="title-card"  gutterBottom variant="h5" component="h2">
2
T J 12 Mei 2021, 18:19