web-dev-qa-db-fra.com

Changer le style des "actions" dans la réaction de la table de matériaux

J'utilise des matériaux-table dans l'un de mes projets.

Pendant que je suis capable de changer le style (taille de la police, couleur) des colonnes définies par l'utilisateur, je ne suis pas capable de le faire pour la colonne "Actions".

Je suis spécialement intéressé par la modification de la taille de la police.

Même problème avec la pagénation: je dois changer sa taille de police, mais il semble qu'il n'y ait aucune option disponible.

S'il vous plaît prendre un exemple de:

https://material-ui.com/components/tables/#Complement-projects

reactjsmaterial-table
4
Deep

Pour la pagination, vous devriez remplacer la composante de pagination . problème , Documentation

const useStyles = makeStyles({
  root: {
    backgroundColor: "blue",
    color: "green"
  },
  toolbar: {
    backgroundColor: "white"
  },
  caption: {
    color: "red",
    fontSize: "20px"
  },
  selectIcon: {
    color: "green"
  },
  select: {
    color: "green",
    fontSize: "20px"
  },
  actions: {
    color: "blue"
  }
});
...
 <MaterialTable
    .....
    components={{
            Pagination: props => (
              console.log(props),
              (
                <TablePagination
             {props.labelDisplayedRows(row)}</div>}
                  component="div"
                  colSpan={props.colSpan}
                  count={props.count}
                  rowsPerPage={props.rowsPerPage}
                  page={props.page}
                  onChangePage={props.onChangePage}
                  onChangeRowsPerPage={this.onChangeRowsPerPage}
                  classes={{
                    root: classes.root,
                    toolbar: classes.toolbar,
                    caption: classes.caption,
                    selectIcon: classes.selectIcon,
                    select: classes.select,
                    actions: classes.actions
                  }}
                />
              )
            )
          }}

Pour la colonne "Actions", j'ai utilisé actions propriété

 actions={[
        {
          icon: "save",
          iconProps: { style: { fontSize: "14px", color: "green" } },
          tooltip: "Save User",
          onClick: (event, rowData) => alert("You saved " + rowData.name)
        }
      ]}


ont regardé cela codesandbox , seraient utiles.

3
Alex