BulkActionButtons mobile styling issue

[zhiguow]

After the Datagrid passed in the bulkActionButtons, when selecting on the mobile phone, there was a problem with the TopToolbar above the Datagrid: the actionButton was set with a white background color to cover the theme color of the TopToolbar.

What you were expecting:

What happened instead:

Steps to reproduce:

On the mobile side, visit https://marmelab.com/react-admin-demo/#/invoices, click to select a record.

1.mp4

Related code:

<Datagrid bulkActionButtons={<PostBulkActionButtons />} >
       .
       .
       .
  </Datagrid>

Temporary solution:

<Datagrid
      sx={{
          '& .RaBulkActionsToolbar-topToolbar': { backgroundColor: 'rgba(0, 0, 0, 0)' },
      }}
      bulkActionButtons={<PostBulkActionButtons />}
  >
       .
       .
       .
  </Datagrid>

Other information:

Environment

• React-admin version: 4.6.1
• React version: 18.2.0
• Browser: Chrome

[fzaninotto]

Reproduced, thanks!