Material-UI example styling

custom-text-field.styles.ts

import { makeStyles } from '@material-ui/styles';
import { Theme } from '@material-ui/core';

export const useStyles = makeStyles((theme: Theme) => ({
    parentForm: {
        backgroundColor: '#C0C0C0'
    },
    customInput: {
        margin: 12,
        '&$disabled': {
            borderColor: 'orange'
        }
    },
    root: {
        '&$disabled $notchedOutline': {
            borderColor: 'orange'
        }
    },
    disabled: {},
    notchedOutline: {}
})
);

custom-text-field.tsx

import React, { FC } from 'react';
import { TextField } from '@material-ui/core';
import { useStyles } from './custom-text-field.styles';

import styled from 'styled-components';

const StyledTextField = styled(TextField)`
  .MuiOutlinedInput-root {
    margin: 12px;
    &.Mui-disabled fieldset {
      border-color: orange;
    }
    &:hover fieldset {
      border-color: green;
    }
  }
`;

export const CustomTextField: FC = () => {
    const classes = useStyles();

    return <form className={classes.parentForm}>
        <StyledTextField
            //    className={classes.customInput}
            variant='outlined'
            disabled
            label='Text Field 1'
        // InputProps={{
        //     classes: {
        //         root: classes.root,
        //         disabled: classes.disabled,
        //         notchedOutline: classes.notchedOutline
        //     }
        // }}
        />
    </form>
}