如何更改Material-UI的Card标头正面? [英] How to change Material-UI's Card header front?

问题描述

我目前有一个Material-UI卡标头，其背景色使默认字体难以阅读.我想让标题使用排版道具h4，但很难找到成功.

I currently have a Material-UI card header that has a background color that makes the default font hard to read. I would like to have the header use the typography prop h4 but having a hard time finding success.

const styles = {

    cardHeader: {
        backgroundColor: "#d8e2f3",
        MuiTypography: {
            fontVariant: "h4"
        }
    }
};

推荐答案

首先，请确保您找到的官方文档很好实质性的ui卡标题api

First, make sure you find the official document well material ui card header api

我想您可能想使用.MuiCardHeader-title(.MuiCardHeader-root)

在浏览器中打开开发模式，通过鼠标悬停选择DOM，您可以看到相关的类名，您可以在浏览器中更改其样式，以检查您所操作的DOM是否符合您的需求.

Open develop mode in your browser, choose DOM by mouseover, you can see the related class names, you may change its styles in browser to check whether the DOM you are operating fit your demand.

并按如下所示定义类样式(MUI-datatable的示例，它是Material-UI表中的一个库)

And define the class styles as below (example of MUI-datatable which is a lib from Material-UI table)

MuiPaper: {
  root: {
    borderRadius: '0 !important',
  }
},
MUIDataTable: {
  root: {
  },
  tableRoot: {
  },
},
MUIDataTableToolbar: {
  root: {
    display: 'none',
  }
},

希望这会有所帮助.

这篇关于如何更改Material-UI的Card标头正面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！