不能将主题传递给子组件 Material-Ui - React？答案

【问题标题】：can't pass theme to child components Material-Ui - React?不能将主题传递给子组件 Material-Ui - React？
【发布时间】：2020-08-01 20:00:09
【问题描述】：

我正在尝试创建一个在组件之间共享样式的全局主题，所以我不需要在每个组件中重复相同的类，所以我有一个主题文件：

export default {
  palette: {
    primary: {
      light: '#039be5',
      main: '#01579b',
      dark: '#b22a00',
      contrastText: '#fff'
    },
    secondary: {
      main: '#004d40',
      contrastText: '#fff'
    }
  },
  typography: {
    userNextVariants: true
  },
  form: {
    textAlign: 'center',
  },
  img: {
    maxWidth: 60,
    margin: '1.5rem auto 5px'
  },
  textField: {
    margin: 20
  },
  button: {
    marginTop: 16,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    margin: 'auto',
    width: 80,
    height: 50
  },
  customError: {
    color: 'red',
    fontSize: '0.7rem'
  },
  small: {
    display: 'block',
    marginTop: '1rem'
  },
  circularProgress: {
    color: '#fff',
    position: 'absolute'
  }
}

在 App.js

中

import themeFile from './theme';
import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
import {MuiThemeProvider} from '@material-ui/core/styles';

const theme = createMuiTheme(themeFile);
 <MuiThemeProvider theme={theme}>
     <Signin />  
 </MuiThemeProvider>

在登录页面：

import makeStyles from '@material-ui/core/styles/makeStyles';

const useStyles = makeStyles(theme => ({
    ...theme
}));
  
const Signin = (props) => {
   const classes = useStyles();
  return //some form and style elements using classes
}

但是我得到一个错误TypeError: color.charAt is not a function，我不知道我是否做得对，我尝试使用withStyles，但我得到了同样的错误，我的代码有什么问题？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

Ciao，问题在于 customError 中的颜色。您不能在材质 UI 主题中使用“红色”。尝试将其替换为#FF0000。

【讨论】：

感谢您的回答，但不幸的是，这并没有解决它:(
是的，我找到了解决我的问题的方法，就是将除pallete 以外的任何东西包裹在一个新对象中，我会发布答案，以便遇到问题的人可以解决它

【解决方案2】：

我找到了解决我的问题的方法，就是将除palette 之外的所有属性包装在这样的对象中

theme.js

export default {
  palette: {
    primary: {
      light: '#039be5',
      main: '#01579b',
      dark: '#b22a00',
      contrastText: '#fff'
    },
    secondary: {
      main: '#004d40',
      contrastText: '#fff'
    }
  },
  spread: {
     typography: {
    userNextVariants: true
  },
  form: {
    textAlign: 'center',
  },
  img: {
    maxWidth: 60,
    margin: '1.5rem auto 5px'
  },
  textField: {
    margin: 20
  },
  button: {
    marginTop: 16,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    margin: 'auto',
    width: 90,
    height: 50
  },
  customError: {
    color: '#FF0000',
    fontSize: '0.7rem'
  },
  small: {
    display: 'block',
    marginTop: '1rem'
  },
  circularProgress: {
    color: '#fff',
    position: 'absolute'
  }
  }
}

登录页面

const useStyles = makeStyles(theme => ({
   ...theme.spread
}));

【讨论】：