Question

我有这段代码

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

后它才有效

Answer 1

你的材料-ui v1与材料-ui v0

令人困惑

className={classes.submit} works only in v1

请参阅此页Styles-Material ui

因此，应用该风格的正确方法是

覆盖内联样式

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

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

覆盖CSS样式

    <RaisedButton primary label="Save" type="submit" className="submit/>

.submit{
    //styles
}

请参阅Complex Example of RaisedButton以获取更多参考资料

Answer 2

className = {classes.submit}这是无效的。类名必须是字符串（类的名称）

材质UI的RaisedButton导致“元素类型无效错误”

2 个答案: