(React, Material UI) Передать вложенный CSSin JS (только 1 уровень) компоненту

Question

Сценарий:

Я использую компонент класса (не функциональный компонент),

У меня есть 2 кнопки, которые я хочу изменить стиль,

Я вложил CSSin JS (только вложенный 1 уровень из root данных)

Я хочу распространить специфику c CSSin JS на классы кнопок Material-ui

Вопрос:

Как передать вложенный CSSin JS в компонент класса?

кажется, что с Style работает только с плоскими данными (не вложенными).

Нерабочий код, которого я пытаюсь достичь:

const Style = {
    btnHappy: {
        root: { width: '900px' },
        text: { fontSize: '50px' },
    },

    btnSad: {
        root: { width: '300px' },
        text: { fontSize: '20px' },
    },
};

class Container extends React.Component {
    render() {
        const { classes } = this.props;
        return (
            <>
                <Button id="btnHappy" variant="outlined" classes={{ ...classes.btnHappy }}> Happy </Button>
                <Button id="btnSad" variant="outlined" classes={{ ...classes.btnSad }}> Sad </Button>
            </>
        );
    }
}

export default withStyles(Style)(Container);

Спасибо