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

Question

我似乎无法掌握如何（未来证明）将我的样式从 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"
        />
    );
};

Answer 1

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

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

How to migrate the styling from mui v4 to mui v5

reactjs

material-ui