gpt4 book ai didi

reactjs - 使用 redux-form 创建自定义风格的 Material UI

转载 作者:行者123 更新时间:2023-12-03 14:31:22 27 4
gpt4 key购买 nike

使用 Material UI + redux-form 创建自定义样式时,redux-form 中的 Field 元素不会应用自定义类名称。当仅使用 Material UI 中的 FieldText 时即可。我已经注释掉了下面不起作用的代码行。

自定义样式对象通过原型(prototype)上定义的名为“classes”的属性应用于 react 组件。

import React, {Component} from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import {createOrder} from '../actions';

const styles = theme => ({
root: {
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'center'
},
margin: {
margin: theme.spacing.unit,
},
textField: {
flexBasis: 400,
},
button: {
margin: theme.spacing.unit,
},
input: {
display: 'none',
},
});


class Order extends Component {

renderField(field) {
return (
<div>
<TextField
id="outlined-simple-start-adornment"
// className={classNames(classes.margin, classes.textField)}
variant="outlined"
label="Age"

{...field.input}
/>

</div>
)
}

render() {
const { classes } = this.props;
return (
<form >
<div className={classes.root}>
<Field
name="age"
label="age"
component={this.renderField}
/>
<TextField
id="outlined-simple-start-adornment"
className={classNames(classes.margin, classes.textField)}
variant="outlined"
label="Company Name"
/>
</div>
</form>
);
}
}

Order.propTypes = {
classes: PropTypes.object.isRequired,
};



export default reduxForm({
form: 'Form'
})(
connect(null, {createOrder})(withStyles(styles)(Order))
);

最佳答案

这是一个旧线程,但我刚刚遇到了类似的问题,我想与那些在 Material UI 和 Redux-form 上遇到相同问题的人分享我是如何解决的:

  1. 将类作为 props 传递
<Field
component={this.renderInput}
classes={classes}
/>
  • props 包含可用的类
  • renderInput(props) {
    console.log('console logging render input', props);
    return (
    <InputBase
    placeholder='Search…'
    inputProps={{ 'aria-label': 'search' }}
    classes={{
    root: props.classes.root, //call your className
    }}
    />
    );
    }

    关于reactjs - 使用 redux-form 创建自定义风格的 Material UI,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53426732/

    27 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com