javascript - 使用 classNames 和 styled 样式化 JSON Schema Form

Question

这对整个反应来说是非常新的，但据我了解，它schema决定了表单数据应该是什么：

var schema = {
    type: "array",
    title: "Season Data",
    items: {
        type: "object",
        required: ["name", "shortname"],
        properties: {
            name: {
                type: "string",
                maxLength: 30
            },
            shortname: {
                type: "string",
                maxLength: 6,
                pattern: "^s\\d*$" //must start with s and end with number
            },
            starts_at: {
                type: "string"
            },
            ends_at: {
                type: "string"
            }
        }
    }
};

虽然uiSchema决定了它应该是什么样子：

let uiSchema = {
    name: {
        classNames: "bold-title",
        "ui:placeholder" : "Season name"
    },
    shortname: {
        "ui:placeholder" : "Assign a shortname (e.g. s5)"
    },
    starts_at: {
        classNames: "label-date-align",
        "ui:widget": dateWidget,
    },
    ends_at: {
        classNames: "label-date-align",
        "ui:widget": dateWidget
    }
}

这两个都在 a 中page_schema.js，还有这个：

const dateWidget = props => {
    return (
        <MuiPickersUtilsProvider utils={DateFnsUtils}>
            <KeyboardDateTimePicker
                format="yyyy-MM-dd hh:mm:ss a"
                value={props.value}
                onChange={(date, value) => {
                    let jsonDate = date && date.toJSON();
                    props.onChange(jsonDate || value);
                }}
                inputVariant="outlined"
            />
        </MuiPickersUtilsProvider>
    );
};

这是page_form.js：

class SeasonForm extends Component {
    constructor(props) {
        super(props);
        this.state ={ seasonsData: [], seasonsDataIndex: 0, formData: {} };
    }
    render() {
        return (
            <Box>
                <SchemaForm
                    liveValidate
                    schema={seasonSchema}
                    uiSchema={seasonUiSchema}
                    widgets={customWidgets}
                    >
                </SchemaForm>
            </Box>
        );
    }
}

export default styled(SeasonForm) ({
    "& .label-date-align" : {
        verticalAlign: "middle",
        lineHeight: "50px",
    },
    "& .reward-list label" : {
        display: "none"
    },
});

但是由于某种原因，导出的样式不会生效。检查 Chrome 中的代码会发现 classNamelabel-date-align已正确分配，但它看起来很糟糕，即使是简单的文本颜色更改也不起作用。

有什么我错过的吗？