I have a sass style for my mui TextField component:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

.input {
    input {
        font-family: 'Poppins', serif;
    }

    :global {
        .MuiInputBase-root {
            background-color: var(--surface) !important;
            border-radius: 30px !important;
            border: 1px solid lightgray !important;
            transition: border-color 0.3s, box-shadow 0.3s !important;
            overflow: hidden !important;

            &:before,
            &:after {
                border: none !important;
                box-shadow: none !important;
            }

            &:hover {
                border: 1px solid lightblue !important;
            }

            &.Mui-focused {
                border: 1.2px solid var(--indigo-blue) !important;
            }

            &.Mui-error {
                border-color: var(--pure-red) !important;
            }
        }
    }
}

It applies to the component but on top of it I can also see the default style. For example, when I hover it I see a black line on border on top of my applied lightblue color. How to remove it so only my customized style is seen?

I tried to apply !important to everything and used :global and &before &after but default style remains