如何去除 Material-UI 主题中的阴影答案

【问题标题】：How to get rid of shadows in the Material-UI theme如何去除 Material-UI 主题中的阴影
【发布时间】：2020-03-13 20:47:48
【问题描述】：

我需要去除 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>

【问题讨论】：

请至少发布一个您在组件上使用的非常简短的示例代码，这应该会有所帮助
使用示例解决方案时什么不起作用？您是否使用Material-UI docs on theming 中所述的自定义主题？
您能指定从哪里导入组件吗？比如Datagrid，它不是Material-ui的一部分。

标签： reactjs material-design material-ui react-admin

【解决方案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>
);

【讨论】：