【发布时间】：2018-10-11 12:51:26
【问题描述】：
有没有办法将我的 material-ui AppBar 组件的背景属性更改为透明而无需实际更改 CSS？
我尝试了 opacity 属性，但这会降低组件内所有内容的不透明度。
下面是我在 Stripe 网站上的意思的示例。
【问题讨论】：
标签： material-ui
【发布时间】：2018-10-11 12:51:26
【问题描述】：
您可以将其背景颜色更改为透明并以这种方式移除盒子阴影：
<AppBar position="static" style={{ background: 'transparent', boxShadow: 'none'}}>
【讨论】：
-
有没有办法做到这一点而不是内联？
-
另一种方法可能是创建自定义主题，但如果除了 appbar 背景之外的内置主题中的其他所有内容都对您来说还可以，那么上述方法是最快的解决方案
-
好的。我试图在包含
AppBar组件的文件顶部使用styles变量，然后出于某种原因使用export default withStyles(styles)(AppBarComponentHere)，无论我尝试什么都不起作用。 -
你的 appBar 类是这样的吗？我得到了这个工作。 appBar：{背景：'透明'，boxShadow：'无'}，
-
我正在寻找它在哪里。感谢您指出。
<AppBar color="transparent" elevation={0}>
【讨论】：
-
谢谢，
Any other props supplied will be provided to the root element (Paper). -
比接受的答案更好的解决方案
-
完美，谢谢。
内联样式可以解决问题，谢谢。但我对这种方法感到有点不舒服，因为我们通常不会使用内联样式——不管有没有 React。
我进行了更深入的研究，试图找到更适合框架的东西，这就是我想出的。
// in App.js
const GlobalCss = withStyles({
'@global': {
'.MuiAppBar-root': {
background: 'transparent',
boxShadow: 'none'
}
}
})(() => null)
然后需要将标签插入到标记中，对我来说是：
<div>
<GlobalCss />
<Router>
.
.
.
文档的相关部分是：
- 要覆盖的 CSS 规则，AppBar API > CSS;
- 设置全局 CSS，Global CSS override。
【讨论】：