Как использовать цвета из темы

Question

Как я могу использовать пользовательские цвета, созданные в theme

export default createMuiTheme({
  palette: {
    primary: {
      main: 'red',
      contrastText: '#ffffff'
    },
    secondary: {
      main: 'green',
      contrastText: '#ffffff'
    },
    error: {
      main: 'blue',
      contrastText: '#ffffff'
    }
  },
})

в React.Component?

Я пытаюсь

import { withTheme } from '@material-ui/core';

затем

class Foo extends React.Component {

  render() {
    return (
               <Avatar 
                   style={{backgroundColor: this.props.theme.primary}} />
            )
    }

const withThemeUserMenu = withTheme(Foo);
export default Foo;

Это не работает.Как получить доступ к цветам из темы?

Answer 1

Я думаю, что это именно то, как вы импортируете. Если вы экспортируете неименованный экспорт, используя default, не имеет значения, как он называется, и вам не нужны скобки.

Они рекомендуют делать это в своих документах:

import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';

let theme = createMuiTheme();
theme = responsiveFontSizes(theme);