JSS嵌套样式容器

Question

我正在使用React -> TextField组件，并且我想对它做一些包装，以便覆盖样式。根据文档，我们有两个支持来实现这一点: 1) InputProps -在这里，我们应该将类传递到作为TextField核心的内部输入组件中。2)直接类属性，应直接应用于TextField。类应该包含FormControl的规则。

(听起来很难，实际上，当您使用实质性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的相同的JSS)不适用于包含规则嵌套容器的对象。

我用这种丑陋的方式完成了这个任务。看起来像地狱，但我没有找到任何办法来避免它。有人能帮帮我吗？真的只有一种方法才能达到这个要求吗？

因为我想实现的方式为我们提供了灵活性，我们可以在任何时候添加任何我们想要的类，而在第二种方式(下面)，我们必须在开始时硬编码所有可能的类。

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

Answer 1

在这种情况下，我要做的是用createMuiTheme({})在单独的文件中为该组件创建主题，并将其应用到带有MuiTheme提供程序组件的组件中。实例：

import { createMuiTheme } from 'material-ui/styles';
const customTheme = createMuiTheme({
    overrides: {
        MuiInput: {
            root:{
                color: 'red',
            },
            underline: {
                    '&:after': {
                      backgroundColor: '#000000',
                    }
              },
        },
    }

});
export default customTheme;

然后用在我的组件上，像这样：

<MuiThemeProvider theme = {customTheme}>
[Your component]
</MuiThemeProvider>

希望这能有所帮助！