TutorialMeta
Ad

How To Get Rid Of Shadows In The Material-UI Theme

- 1 answer

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>

Ad

Answer

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>
);
Ad
source: stackoverflow.com
← Previous Post
Next Post →

Related Questions

Ad