RaisedButton пользовательского интерфейса материала вызывает "Тип элемента является недопустимой ошибкой" - PullRequest
Новая
       3

RaisedButton пользовательского интерфейса материала вызывает "Тип элемента является недопустимой ошибкой"

0 голосов
/ 14 мая 2018

У меня есть этот кусок кода 

import React from 'react'
import { RaisedButton } from 'material-ui'
import PropTypes from 'prop-types'
import { Field, reduxForm } from 'redux-form'
import { TextField } from 'redux-form-material-ui'
import { ACCOUNT_FORM_NAME } from 'constants'
import ProviderDataForm from '../ProviderDataForm/ProviderDataForm'
import classes from './AccountForm.scss'

const AccountForm = ({ account, handleSubmit, submitting }) => (
    <form className={classes.container} onSubmit={handleSubmit}>
        <h4>Account</h4>
        <Field name="displayName" component={TextField} />
        <Field name="email" component={TextField} />
        <Field name="avatarUrl" component={TextField} />
        {!!account && !!account.providerAccount && <ProviderDataForm providerAccount={account.providerAccount} />}
        <RaisedButton primary label="Save" type="submit" className={classes.submit} />
    </form>
)

AccountForm.propTypes = {
    account: PropTypes.object,
    handleSubmit: PropTypes.func,
    submitting: PropTypes.bool
}

export default reduxForm({
    form: ACCOUNT_FORM_NAME
})(AccountForm)

, которые вызывают эту ошибку Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Я искал разные ответы на эту ошибку, но ни один из них, похоже, не решил мою проблему

обратите внимание, что это работает, когда я удаляю <RaisedButton primary label="Save" type="submit" className={classes.submit} />

Ответы [ 2 ]

0 голосов
/ 14 мая 2018

Вы путаете с material-ui v1 с material-ui v0 

className={classes.submit} works only in v1

См. Эту страницу Styles-Material ui

Так что правильный способ применениястиль

  1. Переопределение с помощью встроенного стиля 

const styles = {
  submit: {
    //styles
  },
};

<RaisedButton primary label="Save" type="submit" style={styles.submit} />
Переопределение с помощью стилей CSS 

    <RaisedButton primary label="Save" type="submit" className="submit/>
.submit{
    //styles
}

См. Сложный пример RaisedButton для дополнительной справки

0 голосов
/ 14 мая 2018

className = {classes.submit} это недопустимо.Имя класса должно быть строкой (имя класса)

...