How to migrate the styling from mui v4 to mui v5

Question

I cannot seem to get the hang on how to (future prove) migrate my styling from mui v4 to mui v5. If I got the basic right, mui internally moved to emotion for it's own styling and de-supported the styling used in v4. I therefore assume that the only future prove option is to also migrate all of the styling over to emotion. There does not seem to be an automated way to do so and I'm still struggling in understand how to do this manually.

Let's assume I have the following v4-styled example. How would this translate to the new v5 emotion based styling and what is the recommended migration path?

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

I was just blind. It's all here: https://mui.com/guides/migration-v4/#migrate-from-jss