How to change Material-UI's Card header front?

问题

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

回答1:

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

I guess you may want to use .MuiCardHeader-title (.MuiCardHeader-root)

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.

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',
  }
},

Hope it will help.

来源：https://stackoverflow.com/questions/59381036/how-to-change-material-uis-card-header-front