【问题标题】:Grey background-color on List item instead of white列表项上的灰色背景色而不是白色
【发布时间】:2016-04-30 01:36:09
【问题描述】:

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

【问题讨论】:

标签: material-ui


【解决方案1】:

这就是导致灰色背景的原因 - 来自 normalize.css

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

【讨论】:

    【解决方案2】:

    正如 André 所说,它在 normalize.css 中(还有 sanitize.css!)。在不更改规范化的情况下解决该问题的一种方法是将规则放在父 div 上。我的 ListItems 在一个抽屉里,在一个带有这个 menuDrawer 类的 div 里面:

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

    【讨论】:

      猜你喜欢
      • 2014-11-11
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-11-27
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多