灰色背景颜色列表项目而不是白色
问题描述:
我试图使用Material-ui来制作一个列表,但由于某种原因列表项背景颜色变为灰色。我不明白这灰色是从哪里来的。根据文档http://www.material-ui.com/v0.15.0-alpha.1/#/components/list,列表项目的颜色应该是白色。灰色背景颜色列表项目而不是白色
const muiTheme = getMuiTheme({
fontFamily: 'Roboto, sans-serif',
palette: {
primary1Color: blue500
}
});
render() {
return (
<MuiThemeProvider muiTheme={muiTheme}>
<div>
<AppBar title='Test' showMenuIconButton={false} />
<List>
<Subheader>Heading</Subheader>
<ListItem primaryText="Nexus"/>
</List>
</div>
</MuiThemeProvider>
);
}
}
答
这是什么导致这灰色背景 - 从normalize.css
[type=submit], [type=reset], button, html [type=button] {
-webkit-appearance: button;
}
答
安德烈说,它在normalize.css(和sanitize.css呢!)。在不改变标准化的情况下解决问题的一种方法是在父div上添加一条规则。我有我的listItems中的抽屉里,这个menuDrawer类DIV中:
/* Get around the MaterialUI listItems having a grey background */ .menuDrawer [type="button"] { -webkit-appearance:inherit; }
http://books.andersos.net/ – Anders