@unicity/design-system/dist/components/TextField/TextField.style.js

A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support

import { styled } from '@mui/material/styles';
import { TextField } from '@mui/material';
export const StyledTextField = styled(TextField)(({ theme }) => ({
    '& .MuiOutlinedInput-root': {
        borderRadius: theme.shape.borderRadius,
        backgroundColor: theme.palette.background.paper,
        transition: theme.transitions.create([
            'border-color',
            'background-color',
            'box-shadow',
        ]),
        '&:hover': {
            '& .MuiOutlinedInput-notchedOutline': {
                borderColor: theme.palette.primary.main,
            },
        },
        '&.Mui-focused': {
            '& .MuiOutlinedInput-notchedOutline': {
                borderColor: theme.palette.primary.main,
                borderWidth: 2,
            },
        },
        '&.Mui-error': {
            '& .MuiOutlinedInput-notchedOutline': {
                borderColor: theme.palette.error.main,
            },
        },
    },
    '& .MuiInputLabel-root': {
        color: theme.palette.text.secondary,
        '&.Mui-focused': {
            color: theme.palette.primary.main,
        },
        '&.Mui-error': {
            color: theme.palette.error.main,
        },
    },
    '& .MuiFormHelperText-root': {
        marginTop: theme.spacing(0.5),
        fontSize: theme.typography.caption.fontSize,
        '&.Mui-error': {
            color: theme.palette.error.main,
        },
    },
}));
//# sourceMappingURL=TextField.style.js.map