Переопределение пользовательского интерфейса TextFields другим приложением веб-страницы

Question

У меня есть приложение frontEnd, которое я написал в библиотеках React и Material-Ui. Я ввел это приложение на веб-страницу магазина. Существуют конфликты со стилями, потому что стили магазинов переопределяют стили из Material-Ui. Например, текстовые поля в модальном диалоге должны выглядеть следующим образом (только приложение React):

Проблема заключается в том, что она вводится на веб-страницу магазина. , то это модальное окно выглядит так:

Возможно, существует проблема с переопределением стилей магазина для входных данных. Я имею в виду:

form input[type="text"], form input[type="password"], form input[type="date"], form input[type="number"], form input[type="email"], form input[type="search"] .uneditable-input, form textarea, select {
    background-color: #fff;
    border-color: #c2c2c2;
    border-width: 1px;
    -moz-appearance: none;

Моя форма реализации из модального windows в React:

import React from 'react'
import { Formik } from "formik"
import * as EmailValidator from "email-validator"
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
const ValidatedForm = ({ submit }) => {
    let isSubmited = false;
    return (
        <Formik
            initialValues={{ email: "", phone: "" }}
            onSubmit={(values, { setSubmitting }) => {
                isSubmited = true;
                console.log("Submitting")
                console.log(values)
                setSubmitting(false)
                submit(values);
            }}
            validate={values => {
                let errors = {};
                if (!values.email && !values.phone) {
                    errors.noData = "Uzupełnij przynajmniej jedno poniższych z pól poprawnie"
                    return errors
                }
                if (values.email) {
                    if (!EmailValidator.validate(values.email)) {
                        errors.email = "Wprowadź poprawny adres email"
                    }
                }
                if (values.phone) {
                    const phoneRegex = /^\+48[0-9]{9}$/
                    if (!phoneRegex.test(values.phone)) {
                        errors.phone = "Podaj numer w formacie +48xxxxxxxxx"
                    }
                }
                return errors
            }}
        >
            {props => {
                const {
                    values,
                    touched,
                    errors,
                    isSubmitting,
                    handleChange,
                    handleSubmit,
                } = props;
                return (

                    <form style={{ marginTop: 30 }} onSubmit={handleSubmit}>
                        {isSubmited && errors.noData && (
                            <div  style={{ color: 'red' }}>{errors.noData}</div>
                        )}
                        <TextField
                            margin="dense"
                            name="email"
                            id="email_input"
                            label="email"
                            type="text"
                            fullWidth
                            onChange={handleChange}
                            value={values.email}
                            error={errors.email && touched.email}
                        />
                        {isSubmited && errors.email && touched.email && (
                            <div style={{ color: 'red' }}>{errors.email}</div>
                        )}
                        <TextField
                            margin="dense"
                            id="phone_input"
                            label="telefon"
                            name="phone"
                            type="text"
                            fullWidth
                            value={values.phone}
                            onChange={handleChange}
                            error={errors.phone && touched.phone}
                        />
                        {isSubmited && errors.phone && touched.phone && (
                            <div className="input-feedback" style={{ color: 'red' }}>{errors.phone}</div>
                        )}
                        <Button type="submit" disabled={isSubmitting} color="primary" variant="contained"
                            style={{ marginTop: 20 }} onClick={() => { isSubmited = true }}>Wyślij
                        </Button>
                    </form>
                );
            }}
        </Formik>
    )
}
export default ValidatedForm

Может быть, я должен каким-то образом добавить! Важное свойство в приложении React? Но как? Проблема у меня есть доступ только к приложению React. Как мы видим на изображении выше, есть стили:
Я был бы благодарен за помощь.