A demonstration of how to override the default Material UI component style using useStyles

material-ui-override.tsx

import React, { FC, useMemo } from 'react';
import { TextField, withStyles } from '@material-ui/core';
import { useStyles } from './form.styles';

export const Form: FC = () => {
    const classes = useStyles();
    const StyledTextField = useMemo(
        () => {
            return withStyles({
                root: {
                    margin: 8
                }
            })(TextField);
        }, []
    );

    return <form>
        <StyledTextField variant='outlined' label='Text Field 1' />
        <StyledTextField variant='outlined' label='Text Field 2' />
    </form>
}