Контейнер вложенных стилей JSS

Я работаю с компонентом React Material UI -> TextField, и я хочу сделать вокруг него некую оболочку с возможностью переопределения стилей. Согласно документации, для этого у нас есть 2 реквизита: 1) InputProps - здесь мы должны передать классы во внутренний Компонент ввода, который является ядром нашего TextField. 2) свойство direct classes, которое должно применяться непосредственно к TextField. И эти классы должны содержать правила для FormControl

(звучит сложно, на самом деле это когда вы работаете с Material UI =))

в любом случае, я хочу сделать что-то подобное

import { withStyles } from 'material-ui/styles';

export const TextInputCSSCreator = theme => ({
    "FormControlClasses" : {
        "root" : { "color" : "red }
       }
    "InputClasses" : {
       "underline" : {
           "&:after" : {
               backgroundColor : "red",
           },
       }
    }

});

<TextField
                classses={this.props.classes.FormControlClasses}
                id={this.props.id}
                InputProps={{
                    classes : this.props.classes.InputClasses
                }}
                label={this.props.label}
                value={this.state.value}
                onChange={this._onValueChange}
                margin={this.props.margin}
            />

export default withStyles(TextInputCSSCreator)(TextInput);

Здесь я хотел иметь возможность передать целый объект двум моим целям. Ввод и FormControl. Но вот основная проблема, и я не знаю, как ее решить. Похоже, JSS (то же самое со стилями из MaterialUi) не работает с объектом, который содержит вложенные контейнеры для правил.

Я выполнил эту задачу таким уродливым способом. Это похоже на АД, но я не нашел способа избежать этого. Кто-нибудь может мне помочь, пожалуйста? Неужели это только один способ выполнить это требование?

Потому что способ, который я хочу реализовать, обеспечивает нам гибкость, мы можем добавлять любые классы, которые мы хотим, в любое время, когда во втором способе (ниже) мы должны жестко закодировать все возможные классы в начале

Кстати. Я хочу предоставить механизм для изменения стилей моих компонентов из внешнего приложения, поэтому я не могу использовать CSS, потому что на выходе это должен быть действующий модуль commonJS.

export const TextInputCSSCreator = theme => ({
    "FormControlRoot" : {},
    "FormControlMarginNormal" : {},
    "FormControlMarginDense" : {},
    "FormControlFullWidth" : {},

    "InputRoot" : {},
    "InputFormControl" : {},
    "InputFocused" : {},
    "InputDisabled" : {},
    "InputUnderline" : {
        "&:after" : {
            backgroundColor : "red",
        },
    },
    "InputError" : {},
    "InputMultiline" : {},
    "InputFullWIdth" : {},
    "InputInput" : {},
    "InputInputMarginDense" : {},
    "InputInputDisabled" : {},
    "InputInputMultiline" : {},
    "InputInputType" : {},
    "InputInputTypeSearch" : {}
});

render() {
        const { classes } = this.props;
        return (

            <TextField
                classes={{
                    root : classes.FormControlRoot,
          marginNormal : classes.FormControlMarginNormal,
                    marginDense : classes.FormControlMarginDense,
                    fullWidth : classes.FormControlFullWidth,
                }}
                id={this.props.id}
                InputProps={{
                    classes : {
                        root : classes.InputRoot,
                        formControl : classes.InputFormControl,
                        focused : classes.InputFocused,
                        disabled : classes.InputDisabled,
                        underline : classes.InputUnderline,
                        error : classes.InputError,
                        multiline : classes.InputMultiline,
                        fullWidth : classes.InputFullWIdth,
                        input : classes.InputInput,
                        inputMarginDense : classes.InputInputMarginDense,
                        inputDisabled : classes.InputInputDisabled,
                        inputMultiline : classes.InputInputMultiline,
                        inputType : classes.InputInputType,
                        inputTypeSearch : classes.InputInputTypeSearch
                    }
                }}
                label={this.props.label}
                value={this.state.value}
                onChange={this._onValueChange}
                margin={this.props.margin}
            />


        );
    }

export default withStyles(TextInputCSSCreator)(TextInput);