如何将样式从mui v4迁移到mui v5



我似乎不知道如何(将来证明(将我的样式从mui v4迁移到mui v5。如果我得到了基本的权利,mui内部对自己的风格产生了情感,并取消了对v4中使用的风格的支持。因此,我认为唯一能证明未来的选择是将所有的造型转移到情感上。似乎没有一种自动的方法来做到这一点,我仍然在努力理解如何手动做到这一步。

让我们假设我有以下v4样式的示例。这将如何转化为新的v5基于情感的风格?建议的迁移路径是什么?

import React from 'react';
import makeStyles from '@mui/styles/makeStyles';
import TextField from '@mui/material/TextField';
type PropsTextType = {name: string, required?: boolean, disabled?: boolean, placeholder?: string, label: string, helperText?: string, errorText?: string, value?: string, multiline?: boolean, rows?: number, rowsMax?: number, onChange: (name: string, value: string) => void};
const useStyles = makeStyles(theme => ({
inputText: {
padding: 5,
marginBottom: theme.spacing(1),
width: 200,
},
inputTextField: {
marginBottom: theme.spacing(3),
fontSize: 15,
},
}));
export const MyInputText = ({name, required = false, disabled = false, multiline = false, rows = 1, rowsMax = 1, value = '', label = '', placeholder = '', helperText = '', errorText = '', onChange}: PropsTextType): JSX.Element => {
const classes = useStyles();
return (
<TextField
name={name}
className={classes.inputTextField}
required={required}
disabled={disabled}
multiline={multiline}
rows={rows}
maxRows={rowsMax}
value={value}
label={label}
placeholder={placeholder}
error={errorText.length > 0}
helperText={errorText.length > 0 ? errorText : helperText}
onChange={evt => onChange(name, (evt.target as HTMLInputElement).value)}
fullWidth
size="small"
margin="dense"
variant="standard"
/>
);
};

我只是瞎了眼。一切都在这里:https://mui.com/guides/migration-v4/#migrate-来自jss

最新更新