Question

0

103

Vistas

Modify material-ui Paper boxShadow and background property

I am following their documentation from Here to modify default Paper component properties.

Here is my code.

import { styled } from '@mui/material/styles';
import { Modal, Button, TextField, Grid, Paper } from '@mui/material';

const Item:any = styled(Paper)(({theme}) => ({
  // ...theme.typography.body2,
  root: {
    boxShadow: '1px 1px 1px 1px rgba(255,255,255,0.2)',
  },
  padding: theme.spacing(1),
  textAlign: 'center',
  color: theme.palette.text.secondary,
  boxShadow: '1px 1px 1px 1px rgba(255,255,255,0.2)',
  '& .MuiPaper-root': {
    boxShadow: '1px 1px 1px 1px rgba(255,255,255,0.2)',
  }
}));
const MyComponent = (props: any) => {
    return (
      <Grid container>
        <Grid item xs={8}>
            <Item elevation={1} square variant="outlined">xs=8</Item>
        </Grid>
      </Grid>
    )
}

What am I doing wrong here?

7 months ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-06T15:33:22.123Z

You should change the value of boxShadow, current value is white and is diapered, change to black like below. Try this code, I tested, worked for me:

const Item = styled(Paper)(({theme}) => ({
    padding: theme.spacing(1),
    textAlign: 'center',
    color: '#000',
    backgroundColor: 'pink',
    boxShadow:'3px 3px 5px 3px rgb(0 0 0 ,0.2)'
}));