按钮不会改变我的反应材料ui中的颜色.为什么

Question

我想把按钮的颜色改成深紫色，但不起作用。你知道为什么吗？我在js中插入了如下主题：

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

这是我的js，这里有我的风格和主组件

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';

然后用敲击部件

<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(("来更改按钮的颜色。我认为这就是问题所在，因为它在您的代码中丢失了。

如果你需要更多的澄清，请告诉我，我很乐意提供帮助。