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

Question

我正在尝试使用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>
    );
  }
}

Answer 1

这是造成灰色背景的原因 - 来自normalize.css

[type=submit], [type=reset], button, html [type=button] {
    -webkit-appearance: button;
}

Answer 2

正如安德烈所说，它在normalize.css（和sanitize.css中也是如此！）。在不改变规范化的情况下解决问题的方法是在父div上放置规则。我在一个抽屉里有我的ListItems，在这个menuDrawer类的div里面：

/* Get around the MaterialUI listItems having a grey background */ .menuDrawer [type="button"] { -webkit-appearance:inherit; }