css 无法修改材质UI组件的某些内部样式< Dialog>

uplii1fm 于 2022-12-20 发布在其他

关注(0)|答案(5)|浏览(178)

我尝试将一些相当简单的样式应用到<Dialog>组件中。在本例中，我尝试使用边界半径来圆角。下面是一些简单的内联样式，我想使用它们来覆盖默认的<Dialog>样式：

let overrideStyles = {
  padding: 0,
  margin: 0,
  borderRadiusTopLeft: '4px',
  borderRadiusTopRight: '4px',
};

<Dialog>为覆盖内部样式提供了多种可能性，包括bodyStyle、contentStyle、style、titleStyle、overlayStyle和actionsContainerStyle，我决定尝试将这些样式应用于 * 每个 * 样式。

<Dialog
  bodyStyle={overrideStyles}
  contentStyle={overrideStyles}
  style={overrideStyles}
  titleStyle={overrideStyles}
  overlayStyle={overrideStyles}
  actionsContainerStyle={overrideStyles}
  modal={overrideStyles}
>
  <TestPanel/>
</Dialog>

当我渲染我的TestPanel时，它最终看起来像这样：

注意边角，我的边界半径还没有应用...我打开检查器，注意到下面的div：

如果我对高亮显示的div应用边界半径样式，对话框的角会像预期的那样变圆。这就引出了我的问题...
如何覆盖材质UI的<Dialog>组件的样式以在CSS中应用圆角？

css

来源：https://stackoverflow.com/questions/42894297/unable-to-modify-some-internal-styles-of-material-uis-dialog-component

5条答案

按热度按时间

lndjwyie1#

我用纸 prop 解决了。

<Dialog   PaperProps={{
    style: { borderRadius: 2 }   }}
  >   .... </Dialog>

这完美的工作为我

赞(0）回复(0）举报 2022-12-20

ukdjmx9f2#

您可以覆盖样式，如下所示。

const styles = { 
  root: { }
  paper: { borderRadius: 15 } 
} 

// ... 

<Dialog classes={{ 
    root: classes.root, 
    paper: classes.paper 
}}>
</Dialog>

赞(0）回复(0）举报 2022-12-20

m528fe3b3#

不幸的是，Material UI并不是非常风格友好的。在这个例子中，没有可以覆盖的属性来改变border-radius，所以我们必须应用我们自己的类：

let headerStyles = {
  color: 'white',
  textAlign: 'center',
  fontSize: 24,
  backgroundColor: '#3B8DBC',
  padding: 20,
  borderTopLeftRadius: 4,
  borderTopRightRadius: 4
};

let bodyStyles = {
  backgroundColor: 'white',
  padding: 10,
  height: 200
};

<Dialog className='test'>
  <div style={headerStyles}>Testing</div>
  <div style={bodyStyles}>5:43pm</div>
</Dialog>

然后设置该类的样式，是的，必须在下面的CSS类和TestPanel头上设置border-radius：

/* Some rules use !important because Material UI sets them by default */
.test > div > div {
  background-color: #3B8DBC;  /* Same background-color as TestPanel */
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.test > div > div > div {
  /* Not overriding the color and border radius here too result in your changes
     not being visible. */
  background-color: inherit !important;
  border-top-left-radius: 4px !important;
  border-top-right-radius: 4px !important;
}

.test > div > div > div > div {
  /* This div is the topmost padding between the modal content and the edge
     of the modal */
  padding: 0 !important;
}

这最终看起来像你想要的：screenshot here
希望这有帮助！

赞(0）回复(0）举报 2022-12-20

camsedfj4#

在创建主题对象时，可以在应用程序中全局覆盖<Dialog />样式。MuiDialog的paper键将允许您定位border-radius。

const theme = createMuiTheme({
  overrides: {
    MuiDialog: {
      paper: {
        borderTopLeftRadius: '4px',
        borderTopRightRadius: '4px'
      }
    }
  }
})

对话框- CSS API Material UI Theming

赞(0）回复(0）举报 2022-12-20

9jyewag05#

第一个答案对我不起作用。我试过这个答案，它对我非常有效：

sx={{
    "& .MuiDialog-container": {
    "& .MuiPaper-root": {
      width: "100%",
      maxWidth: "740px",
      borderRadius: "8px"
        }
      },
    }}

赞(0）回复(0）举报 2022-12-20

我来回答

css 无法修改材质UI组件的某些内部样式< Dialog>

5条答案

相关问题

热门标签

最新问答