无法覆盖模态组件中的样式？答案

【问题标题】：cant override styles in modal component?无法覆盖模态组件中的样式？
【发布时间】：2021-01-08 19:48:05
【问题描述】：

我在材质 ui 中使用模态组件，但无法覆盖它们为组件提供的自动显示样式。

这是我的使用风格


const useStyles = makeStyles((theme) => ({
  modal: {
    inset: '1px 1px 0 0',
    width: '40vw',
   
  },
})


<Modal
    aria-labelledby='transition-modal-title'
    aria-describedby='transition-modal-description'
    className={classes.modal}
>

默认的 css 属性覆盖了我在 classes.modal 中编写的样式，为什么会发生这种情况，我该如何解决？我需要完全改变 inset 属性

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

如果你不能用一个类覆盖它，你可以使用线性样式。

<Modal style={{inset:'1px 1px 0 0',width:'40vw'}}>

【讨论】：

【解决方案2】：

尝试使用（纸和）：

const useStyles = makeStyles((theme) => ({
  modal: {
    inset: "1px 1px 0 0",
    width: "40vw"
  },
  paper: {
    backgroundColor: theme.palette.background.paper,
    border: "2px solid gray",
    boxShadow: theme.shadows[5],
    padding: theme.spacing(2, 4, 3)
  }
}));

sandbox

【讨论】：