Материал-пользовательский интерфейс. Как переопределить селектор двух классов библиотеки с моим пользовательским классом

У меня есть элемент Grid с примененным пользовательским классом CSS addPanel (с использованием makeStyles). В преобразованном HTML это выглядит как класс .makeStyles-addPanel-21, примененный к элементу div. Но сам Material-UI дополнительно применяет к этому div собственный стиль, который выглядит вот так.MuiGrid-spacing-xs-3 > .MuiGrid-item.
Конечно, селектор 2-классов Material-UI имеет более высокую специфичность, чем мой селектор 1-класса, поэтому он перекрывает мой.



Как я могу применить селектор 2 или 3 класса к моему Grid, чтобы повысить специфичность селектора CSS и, таким образом, переопределить класс Material-UI?
Вот упрощенный код:

import React from 'react';
import {makeStyles} from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import TextField from '@material-ui/core/TextField';

const useStyles = makeStyles((theme) => ({
    addPanel: {
        paddingTop: "44px",
        paddingLeft: "50px",
    },
}));

const ManageLocales = (props) => {
    const classes = useStyles();

    return (
        <Grid container spacing = {3}>
            <Grid item container xs = {8} spacing = {3} className = {classes.addPanel}>
                <Grid item>
                    <TextField 
                        label = "Add country" 
                        variant = "outlined" 
                        size = "small"
                    />
                </Grid>                            
            </Grid>
        </Grid>
    );
}
export default ManageLocales;