如何在React中的材质表中应用自定义CSS？

Question

您好，我正在尝试在材质表上应用自定义 CSS，但它无法正常工作。我尝试在 Material UI 中使用 makeStyles 函数来做到这一点，但仍然不起作用。我想要排序箭头就在文本后面。现在排序箭头位于文本左侧。我还希望将向上箭头和向下箭头放在一起。我创建了一个函数 -

const useStylesTableSort = makeStyles({
  root: {
    flexDirection: "unset",
  },
});

这是我的材料表代码 -

<MaterialTable
  className={{useStylesTableSort.root}}
  style={{ flexDirection: "unset" }}
  title=""
/>

我想在材质表中使用 className 添加此函数，但材质表不支持 className。样式标签也不起作用。那么我怎样才能做到这一点呢？我想更改 MuiTableSortLabel 的根 css。任何帮助，将不胜感激。

Answer 1

您可以覆盖 Container 组件并向 中添加一个 className <Paper/>，这是材质表的主容器。

 <MaterialTable
   columns={[]}
   data={data}
   components={{
    Container: (props) => <Paper className={classes.filterTable} {...props}/>
        }}
  />

另一种方法是使用 Style 属性。

<MaterialTable
   columns={[]}
   data={data}
   style={{
   marginTop:'50px'
     }}
/>