1

我正在使用 React Material UI -> TextField组件，我想围绕它制作一些包装器，并可以覆盖样式。根据文档，我们有 2 个 props 来实现这一点： 1) InputProps - 这里我们应该将类传递给作为 TextField 核心的内部Input组件。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 个目标。输入和表单控件。但这是主要问题，我不知道如何解决。看起来 JSS（与 MaterialUi 中的 withStyles 相同）不适用于包含规则的嵌套容器的对象。

我通过这种丑陋的方式完成了这项任务。它看起来像地狱，但我没有找到任何方法来避免它。有人可以帮我吗？真的只有一种方法可以满足这个要求吗？

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

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

1 回答 1

2

what I would do in this situation is to create theme for this component in separate file with createMuiTheme({}) and apply it to component with MuiTheme provider component. Exp:

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

});
export default customTheme;

and then use it on my component like this:

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

Hope this helps!

于 2018-04-04T06:55:06.030 回答