authelia/web/src/components/FixedTextField.tsx

import React from "react";
import TextField, { TextFieldProps } from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/core";

/**
 * This component fixes outlined TextField
 * https://github.com/mui-org/material-ui/issues/14530#issuecomment-463576879
 * 
 * @param props the TextField props
 */
const FixedTextField = function (props: TextFieldProps) {
    const style = useStyles();
    return (
        <TextField {...props}
            InputLabelProps={{
                classes: {
                    root: style.label
                }
            }}
            inputProps={{autoCapitalize: props.autoCapitalize}}>
            {props.children}
        </TextField>
    );
}

export default FixedTextField

const useStyles = makeStyles(theme => ({
    label: {
        backgroundColor: theme.palette.background.default,
        paddingLeft: theme.spacing(0.1),
        paddingRight: theme.spacing(0.1),
    }
}));