не может передать тему дочерним компонентам. Material-Ui - React?

Question

Я пытаюсь создать глобальную тему с общими стилями между компонентами, поэтому мне не нужно повторять одни и те же классы в каждом компоненте, поэтому у меня есть файл темы:

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

и в Приложение. 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, но получил ту же ошибку, что не так в моем коде?

Answer 1

Я нашел решение своей проблемы, заключив все свойства, кроме pallette, в объект, подобный этой

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
}));

Answer 2

Ciao, проблема по цвету в customError. Вы не можете использовать красный цвет в теме пользовательского интерфейса материала. Попробуйте заменить его на # FF0000.