限制命令按钮列的数据网格中的列宽

Question

在 React-Admin 中，我想限制在数据网格中显示编辑、显示按钮的列的宽度

我知道我可以使用样式来设置其他单元格（如 TextFields）的宽度，但找不到使用按钮来完成此操作的方法

enter image description here

Answer 1

在 Datagrid 中，您可以使用 headerClassName cellClassName 道具来设置 header 行和 body 行中的单元格的样式，如中所述Datagrid/CSS-Api

部分下的文档

<ShowButton
   headerClassName={classes.hiddenOnSmallScreens}
   cellClassName={classes.hiddenOnSmallScreens}
/>

*编辑

显然这种方法在使用 typescript 时不起作用，可能是一个错误 - 您可以通过这种方式解决它：

const usePostListActionToolbarStyles = makeStyles({
  toolbar: {
    alignItems: "center",
    display: "flex",
    marginTop: -1,
    marginBottom: -1
  }
});

const PostListActionToolbar = ({ children, ...props }) => {
  const classes = usePostListActionToolbarStyles();
  return (
    <div className={classes.toolbar}>
      {Children.map(children, (button) => cloneElement(button, props))}
    </div>
  );
};

然后在您的数据网格中：

<Datagrid>
   //...fields
  <PostListActionToolbar>
      <ShowButton/>
      <EditButton/>
  </PostListActionToolbar>
</Datagrid>

限制命令按钮列的数据网格中的列宽

Limiting column width in datagrid for command button columns

react-admin