材质 UI 卡没有出现样式？答案

【问题标题】：Style not appearing for Material UI Cards?材质 UI 卡没有出现样式？
【发布时间】：2020-07-13 17:05:58
【问题描述】：

我目前正在尝试通过使用 useStyles 和使用 titleSection 的类名来覆盖默认的 Material UI 类。目前，我希望 titleSection 是粗体并且是 Roboto 字体，但这些都没有被应用。

这是我的名片：

function ImageCard(props: ImageCardProps) {
  const classes = useStyles();

  return (
    <Card>

      <CardHeader title={props.title} className={classes.titleSection} />
 
    </Card>
  );
}

这是我的 useStyles：

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    
    
    titleSection:{
        paddingBottom: 0,
        fontWeight:'bolder',
        fontFamily:'Roboto',
    },
  })
);

【问题讨论】：

为您的问题创建一个codesandbox.io 演示。

标签： css reactjs material-ui styling

【解决方案1】：

MUI 文档非常适合解释这一点：https://material-ui.com/api/card-header/

您可以使用 'classes' 属性并定位包含排版组件的标题 css 规则名称。

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    title: {
      paddingBottom: 0,
      fontWeight: 'bolder',
      fontFamily: 'Roboto, sans-serif',
    },
  })
);

function ImageCard(props: ImageCardProps) {
  const classes = useStyles();

  return (
    <Card>
      <CardHeader title={props.title} classes={{ title: classes.title }} />
    </Card>
  );
}

或者，如果您希望它是全局的，请查看 MUI 主题对象和主题覆盖文档：

【讨论】：