灰色背景颜色列表项目而不是白色

问题描述:

我试图使用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> 
    ); 
    } 
} 

Image showing background color

+0

http://books.andersos.net/ – Anders

这是什么导致这灰色背景 - 从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; }