JSS嵌套样式容器

我正在使用React Material UI - > TextField组件，我想围绕它做一些包装，可以覆盖样式 . 根据文档，我们有2个道具来实现这一点：1）InputProps - 这里我们应该将类传递给内部Input组件，这是我们TextField的核心 . 2）直接类属性，应直接应用于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);

在这里，我希望有可能将整个对象传递到我的2个目标中 . 输入和FormControl . 但这是主要问题，我不知道如何解决它 . 它看起来像JSS（它与MaterialUi中的withStyles相同）不适用于包含规则的嵌套容器的对象 .

我通过这种丑陋的方式完成了这项任务 . 它看起来像HELL，但我没有找到任何方法如何避免它 . 有人可以帮帮我吗？它真的只是实现这一要求的一种方式吗？

因为我想要实现的方式为我们提供了灵活性，我们可以随时添加任何我们想要的类，当第二种方式（下面）我们必须在开始时对所有可能的类进行硬编码

顺便说一句 . 我想提供一种机制来从外部应用程序更改我的组件的样式，这就是为什么我不能在输出中使用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);