主题更改后，材质Ui按钮的颜色未更改 [英] Material Ui button colors not changed after theme change
问题描述
在具有反应的项目中，使用物料Ui.主题已被覆盖，但按钮和输入的颜色未更改.
In the project with react Material Ui is used. The theme is being overriden, but the colors of buttons and inputs do not change.
这是创建Material Ui主题的 theme.js
Here is the theme.js where Material Ui theme is created
// @flow
import { createMuiTheme } from '@material-ui/core';
import type
{
Theme,
} from '@material-ui/core';
const theme: Theme = createMuiTheme({
palette: {
primary: {
main: '#ffa300',
light: '#ffd449',
dark: '#c67400',
contrastText: '#000000',
},
secondary: {
main: '#ff8500',
light: '#ffb644',
dark: '#c55600',
contrastText: '#000000',
},
error: {
main: '#A21C2B',
},
},
});
export default theme;
这是 App.js
import React from 'react';
import { ThemeProvider } from '@material-ui/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import {
Switch,
} from 'react-router-dom';
import theme from './theme';
import Auth from './Auth';
const App = () => (
<ThemeProvider theme={theme}>
<CssBaseline />
<Switch>
<Auth />
</Switch>
</ThemeProvider>
);
export default App;
请注意这里使用了新的 ThemeProvider ，因为以后会使用钩子.
Note there the use of the new ThemeProvider because hooks are used later.
这是示例登录页面
// @flow
import * as React from 'react';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import FormControl from '@material-ui/core/FormControl';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Input from '@material-ui/core/Input';
import InputLabel from '@material-ui/core/InputLabel';
import LockIcon from '@material-ui/icons/LockOutlined';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/styles';
const useStyles = makeStyles(theme => ({
main: {
width: 'auto',
display: 'block', // Fix IE 11 issue.
marginLeft: theme.spacing.unit * 3,
marginRight: theme.spacing.unit * 3,
[theme.breakpoints.up(400 + theme.spacing.unit * 3 * 2)]: {
width: 400,
marginLeft: 'auto',
marginRight: 'auto',
},
},
paper: {
marginTop: theme.spacing.unit * 8,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: `${theme.spacing.unit * 2}px\
${theme.spacing.unit * 3}px\
${theme.spacing.unit * 3}px`,
},
avatar: {
margin: theme.spacing.unit,
backgroundColor: theme.palette.secondary.main,
},
form: {
width: '100%', // Fix IE 11 issue.
marginTop: theme.spacing.unit,
},
submit: {
marginTop: theme.spacing.unit * 3,
},
}));
const Login = (props) => {
const classes = useStyles();
return (
<main className={classes.main}>
<Paper className={classes.paper}>
<Avatar className={classes.avatar}>
<LockIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<form className={classes.form}>
<FormControl margin="normal" required fullWidth>
<InputLabel htmlFor="email">Email Address</InputLabel>
<Input id="email" name="email" autoComplete="email" autoFocus />
</FormControl>
<FormControl margin="normal" required fullWidth>
<InputLabel htmlFor="password">Password</InputLabel>
<Input
name="password"
type="password"
id="password"
autoComplete="current-password"
/>
</FormControl>
<FormControlLabel
control={<Checkbox value="remember" color="primary" />}
label="Remember me"
/>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
Sign in
</Button>
</form>
</Paper>
</main>
);
};
export default Login;
这是问题所在.按钮和输入的颜色不变.但是 LockIcon 的颜色已更改为主题提供的颜色.
And here is the problem. The colors of the button and input are not changed. But the color of the LockIcon is changed to the color provided by theme.
推荐答案
更新
以下答案特定于将 @ material-ui/styles 与Material-UI的3.x版本一起使用.这些安装步骤( bootstrapMuiStyles.js )对于Material-UI的v4不再是必需的.
The answer below is specific to using @material-ui/styles with the 3.x versions of Material-UI. These install steps (bootstrapMuiStyles.js) are no longer necessary for v4 of Material-UI.
最初，我建议还使用 MuiThemeProvider 包装.可以，但是是错误的解决方案，在尝试使用新的 @ material-ui/styles 软件包时，可能会导致进一步的问题.根据Josh Wooding的评论，然后阅读文档中的详细信息并浏览一些代码，以下是符合Josh推荐的解决方案.摘录来自我的CodeSandbox，因此由于我对您的代码所做的简化/更改(例如不使用类型)而存在一些差异，以获取有效的示例.重要的部分只是 index.js 和 bootstrapMuiStyles.js -尤其是导入的顺序.直接从 index.js 导入 install 方法是行不通的，因为这将迫使您在已经导入后调用 install()导入的 App.js .
Initially I recommended also wrapping with the MuiThemeProvider. That works, but is the wrong solution and likely would lead to further issues when trying to use the new @material-ui/styles package. Based on Josh Wooding's comment and then reading the details in the docs and looking through some of the code, below is a solution in line with Josh's recommendation. The excerpts are from my CodeSandbox so there are some differences due to simplifications/changes (e.g. not using types) I did to your code to get a working example. The important parts are just index.js and bootstrapMuiStyles.js -- particularly the ordering of the imports. It will not work to import the install method directly from index.js, because that will force you to call install() after you have already imported App.js.
index.js
import React from "react";
import ReactDOM from "react-dom";
// It is important for this import to be before the import of App
// so that no other Material-UI imports happen before the install
import "./bootstrapMuiStyles";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
bootstrapMuiStyles.js
import { install } from "@material-ui/styles";
install();
App.js
import React from "react";
import { ThemeProvider } from "@material-ui/styles";
import CssBaseline from "@material-ui/core/CssBaseline";
import theme from "./theme";
import Login from "./Login";
const App = () => (
<ThemeProvider theme={theme}>
<CssBaseline />
<Login />
</ThemeProvider>
);
export default App;
然后 Login.js 是您问题中代码的几乎完全相同的副本.
And then Login.js is a nearly exact copy of the code from your question.
您可以在这里看到此功能:
You can see this working here:
这篇关于主题更改后，材质Ui按钮的颜色未更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
