Remove (or at least hide) card on react-admin List

Question

I want to get rid of the Card on the background react-admin's List (v3.4.2). I get the desired effect if I define a string on the component property:

<List component={"some string"}/>

But this spams the console with an error:

And I don't want to have that error. On top of that, I think I shouldn't be changing the component property (I can't find it on the official docs).

The code should be the following: https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/list/List.js

How should I do this? Is it possible to pass a style? Is there any component that works out of the box? Or should I just go custom?

Answer 1

You can hide the background using styling:

import { makeStyles } from '@material-ui/core/styles'

const useListStyles = makeStyles(theme => ({
    content: { 
      boxShadow: 'none',
      backgroundColor: 'inherit',
    },
    main: {
//    backgroundColor: 'red',
    },
    root: {
//    backgroundColor: 'red',
    },
}))

const MyList = (props) => {
  const classes = useListStyles() 
  return (
    <List classes={classes} {...props} >
   ...
    </List>
  )
}