时间戳

首页 > 解决方案 > 带有 css 的样式排版

css - 带有 css 的样式排版

问题描述

我正在尝试使用 CSS 文件对 Material UI 中的 Typography 进行样式设置，但我所做的样式并未应用于我的 React 网站。任何帮助将不胜感激！

我想用 className ".title-card" 来设置 Typography 的样式，下面你会找到对应的 js 和 css 文件

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

我想应用相应的字体和文本更改但未应用

标签： cssreactjsmaterial-ui

解决方案

必须引用带空格的字体系列：

font-family: "Open Sans";

还要修正你的错字：

<Typography className=".title-card

删除点。

推荐阅读