React物料表:如何覆盖物料表中的标题样式?

时间:2020-07-06 12:31:02

标签: reactjs material-ui material-table

我正在使用材料表“ https://material-table.com/”

这是我呈现数据表的组件。在这里,我使用标题内的自定义按钮添加新数据。它在标题内,因此按钮位于左上角。我不使用Material-Table给出的默认添加选项,因为我想显示一个单独的表单页面来添加数据,而不是Material-Table给出的内联添加。效果很好。

问题在于标题的默认样式具有overflow:hidden,可以通过对其进行检查来查看。
<div class='MTableToolbar-title-35'> .... </div>

我希望这个overflow:hiddenoverflow:auto。如何覆盖此标题的样式?

 export const EmployeeView = ({columns,data}) => {
        return (
          <div>
            <MaterialTable
              columns={columns}
              data={data}
              title={
                <div>
                  <IconButton size='small' color='primary' onClick={() => console.log("Add employee")}>
                      <AddCircleIcon />
                  </IconButton>
                </div>
              }
              onRowClick={(event,rowData) => console.log(rowData)}
            />
          </div>
        )
      
    }

1 个答案:

答案 0 :(得分:0)

请在css文件中使用

.MuiTypography-h6{
    font-size: 1rem;
    color: red;
    overflow:auto
}

我提到了测试的颜色和字体大小。