Material-ui MuiThemeProvider 不适用答案

【问题标题】：Material-ui MuiThemeProvider Not applyingMaterial-ui MuiThemeProvider 不适用
【发布时间】：2020-05-12 08:53:05
【问题描述】：

我正在尝试自定义我的应用程序的主题，但是仍然显示默认主题颜色而不是我尝试实现的主题颜色

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import "./App.css";
import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";
import createMuiTheme from "@material-ui/core/styles/createMuiTheme";

// components
import Navbar from "./components/Navbar";

// pages
import home from "./pages/home";
import login from "./pages/login";
import signup from "./pages/signup";

这是我自定义主题的尝试。

const theme = createMuiTheme({
  pallete: {
    primary: {
      light: "#67daff",
      main: "#03a9f4",
      dark: "#007ac1",
      contrastText: "#fff",
    },
    secondary: {
      light: "#7953d2",
      main: "#4527a0",
      dark: "#000070",
      contrastText: "#fff",
    },
  },
});

class App extends Component {
  render() {
    return (
      <MuiThemeProvider theme={theme}>
        <div className="App">
          <Router>
            <Navbar />
            <div className="container">
              <Switch>
                <Route exact path="/" component={home} />
                <Route exact path="/login" component={login} />
                <Route exact path="/signup" component={signup} />
              </Switch>
            </div>
          </Router>
        </div>
      </MuiThemeProvider>
    );
  }
}

The Output

The one i tried to achieve

import React, { Component } from "react";
import { Link } from "react-router-dom";

// Material UI Stuff
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Button from "@material-ui/core/Button";


class Navbar extends Component {
  render() {
    return (
      <AppBar>
        <Toolbar className="nav-container">
          <Button color="inherit" component={Link} to="/login">
            Login
          </Button>
          <Button color="inherit" component={Link} to="/">
            Home
          </Button>
          <Button color="inherit" component={Link} to="/signup">
            Signup
          </Button>
        </Toolbar>
      </AppBar>
    );
  }
}

export default Navbar;

那里，我希望在导航栏中应用托盘，但它不会应用。我只是在学习一些教程，所以我真的不知道错误在哪里。

【问题讨论】：

我没有看到您使用任何材质 ui 组件展示的任何示例。可以附上吗？
完成了，我刚刚发布了我试图应用托盘的导航条代码。谢谢！
字调色板不正确 -> 调色板
material-ui.com/customization/palette
谢谢老兄！！哦，我怎么没看到呢:D

标签： reactjs material-ui

【解决方案1】：

您可以在样式格式中定义颜色。如果你想改变容器类的颜色，你可以输入；

 class App extends Component {
  render() {
   return (
    <MuiThemeProvider theme={theme}>
     <div className="App">
       <Router>
        <Navbar />
        <div className="container" style={{
            color: "black",
            backgroundColor: "white",
          }} >
          ...

【讨论】：