时间戳

首页 > 解决方案 > Material-ui 主题不会自动应用在 AppBar 上？

material-ui - Material-ui 主题不会自动应用在 AppBar 上？

问题描述

我正在尝试将 material-ui 集成到我的项目中，但自定义主题设置存在一些问题

我以这种方式创建了一个自定义主题

应用程序.js

const theme = createMuiTheme({
    palette: {
        primary: green,
        secondary: red,
    },
});

class App extends Component {

    render() {
        return (
                <MuiThemeProvider theme={theme}>
                    <BrowserRouter>
                        <Switch>
...}}

然后在子结构中的一个组件中，我创建了一些特定的 css。

现在我的问题是我必须使用背景颜色定义样式appBar并将其明确应用于 AppBar 组件。如果我不做这两个操作之一，appBar的bg仍然是浅灰色

奇怪的是我从 theme.palette.primary["500"] 得到了正确的绿色，这意味着主题配置正确

页眉.js

const styles = theme => ({
    root: {
        flexGrow: 1,
    },
    grow: {
        flexGrow: 1,
    },
    appBar: {
        backgroundColor: theme.palette.primary["500"]
    },//...)}

class Header extends Component {
    constructor(props) {
        super(props)
        this.classes = props.classes
    }

    render() {
        return (<I18n>
                    {(tsl, {i18n, t, ready}) => {
                        return (
                                <div className={this.classes.root}>
                                    <AppBar position="static" color="default" className={this.classes.appBar}>
                                        <Toolbar>...(irrelevant code)

我按照https://material-ui.com/demos/app-bar/中的示例进行操作，其中第一个示例具有浅灰色，然后所有其他示例具有蓝色 bg，但源代码中没有任何内容添加以应用蓝色（在我看来）

请问有什么帮助吗？谢谢大家

标签： material-ui

解决方案

使用<AppBar position="static" color="primary">.

默认情况下AppBar使用grey调色板中的颜色。

我们正在考虑默认primary为color道具，因为它没有遵循规范，并且将灰色作为应用栏这样突出的东西的默认值无论如何都是一个坏主意。

推荐阅读