按钮不会改变我的react-ui中的颜色。为什么？

Question

我想将按钮的颜色更改为深紫色，但是不起作用。你知道为什么吗？我已将主题插入我的js中，如下所示：

import { useTheme } from "@material-ui/core/styles";

这是我的js，其中有我的样式和home组件

const styles = theme => {
  return {
    root: {
      link: {
        display: "flex"
      },
      icon: {
        marginRight: theme.spacing(0.5),
        width: 20,
        height: 20
      },
      flexGrow: 1,
      container: {
        backgroundColor: "",
        padding: "20px",

    margin: "40px 0px 0px 0px"
  },
  gridLeft: {
    backgroundColor: ""
  },
  gridRight: {
    backgroundColor: "",
    textAlign: "center"
  },
  titleTypography: {
    fontFamily: "Montserrat",
    marginBottom: "20px",
    color: "white"
  },
  subtitleTypography: {
    fontFamily: "Montserrat",
    marginBottom: "20px"
  },
  titleButton: {
    fontFamily: "Montserrat",
    marginBottom: "20px",
    color: "white",
    backgroundColor: theme.palette.info.dark
  }
}

};

这就是我在jsx中使用它的方式：

<Button
          variant="contained"
          size="large"
          className={titleButton}
          component={Link}
          to="/register"
        >
          Get started
        </Button>

这是我主题的信息颜色：

export const teechrTheme = createMuiTheme({
  palette: {
    primary: {
      light: "#fff",
      main: "#fafafa",
      dark: "#e0e0e0",
      contrastText: "#fff"
    },
    secondary: {
      light: "#fff176",
      main: "#ffee58",
      dark: "#fdd835",
      contrastText: "#fff"
    },
    info: {
      light: "#7e57c2",
      main: "#673ab7",
      dark: "#5e35b1",
      contrastText: "#fff"
    }

非常感谢您的帮助！

Answer 1

你好，谢谢你问你的问题。

首先，我不清楚您是如何将主题注入/围绕组件的，

首先导入ThemeProvider并将其绕到通常执行所有路由的组件树周围。

在App.js中应该这样

import { ThemeProvider } from '@material-ui/styles';

然后使用rap组件

 <ThemeProvider theme={theme}> 
<Header/>
<Content/>
<Footer/>
</ThemeProvider>

这是将主题注入组件的方式。

继续更改按钮的颜色，我为您编写了一个小的react组件，它确实可以更改按钮的颜色。在这里，您希望对您有所帮助：）

import React from "react";
import { Button } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  purpleButton: {

    backgroundColor: "#4a148c", // you can add your specific CSS here.

  }
}));

const PurpleButton = () => {

  const classes = useStyles();

  return (
    <div>
      <Button className={classes.purpleButton} variant="contained"> Get started </Button>
    </div>
  );
};

export default PurpleButton;

在上面的示例中，我使用了以下钩子“ const classes = useStyles（）”来更改按钮的颜色。我认为这是问题所在，因为您的代码中缺少它。

让我知道是否需要更多说明，我们很乐意为您提供帮助。