如何在Material-UI主题中消除阴影

Question

我需要去除MuiPaper组件中的阴影。

我找到了一些解决方案：for example

但是他们没有用。我只能覆盖根组件（MuiPaper），但阴影由类MuiPaper-elevation1-24设置。

渲染组件的代码

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

尝试一下：

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>
);