修改material-ui纸盒阴影和背景属性答案

【问题标题】：Modify material-ui Paper boxShadow and background property修改material-ui纸盒阴影和背景属性
【发布时间】：2022-01-24 17:12:13
【问题描述】：

我正在关注他们来自 Here 的文档来修改默认的 Paper 组件属性。

这是我的代码。

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

我在这里做错了什么？

【问题讨论】：

标签： javascript reactjs material-ui material-design

【解决方案1】：

你应该改变 boxShadow 的值，当前的值是白色的并且是尿布的，像下面这样改为黑色。试试这段代码，我测试过，对我有用：

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

【讨论】：