Question

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

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

App.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”]中获得了正确的绿色，这意味着主题已正确配置

Header.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，但是源代码中没有添加任何可应用蓝色的内容（在我的看法）

请帮忙吗？谢谢大家

Answer 1

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

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

我们正在考虑将primary道具的默认值设置为color，因为它没有遵循规范，而对于像应用栏一样突出的东西使用灰色作为默认值是个坏主意。

material-ui主题是否不会自动应用到AppBar？

1 个答案: