如何摆脱 Material-UI 主题中的阴影

Question

I need to get rid of shadows in MuiPaper component.

I found some solution: for example

but they didn't work. I can override only root component (MuiPaper) but the shadow is set by the class MuiPaper-elevation1-24.

code that render component

 const List = props => ( <List {...props} title="lists" filters={<Filter />} sort={{ field: 'timestamps.createdAt', order: 'DESC' }}> <Datagrid rowClick="show" expand={<Edit />} > <TextField source="attributes.campaignUuid" label="Campaign Uuid" /> <TextField source="attributes.affiliateId" label="Affiliate Id" /> <DateField source="attributes.createdAt" label="Created At" showTime locales="ru-RU" sortBy="timestamps.createdAt" /> <DateField source="attributes.updatedAt" label="Updated At" showTime locales="ru-RU" sortBy="timestamps.updatedAt" /> <DeleteButton /> </Datagrid> </List> );

 And HTML that I receive: <div class="list-page Component-root-904"> <div class="MuiPaper-root-21 MuiPaper-elevation1-24 MuiPaper-rounded-22 MuiCard-root-740 Component-card-905"></div> </div>

Answer 1

Try this:

import { withStyles, createStyles } from '@material-ui/core/styles';

const listStyles = theme => createStyles({
  card: {
    boxShadow: 'none',
  },
});

const List = withStyles(listStyles)(({ classes, ...props }) => (
  <List classes={classes} title="lists" filters={<Filter />} sort={{ field: 'timestamps.createdAt', order: 'DESC' }} {...props}>
    ...
  </List>
);