材质用户界面-从功能组件更改文本字段的字体大小

Question

我具有以下功能组件，我想更改文本字段的字体大小，但是由于某些原因，我无法弄清楚。我知道如果我有传统组件，可以导出它withStyles并设置className或InputProps，但是我不确定如何使用当前设置进行操作：

类定义：

const FormObjectText = ({id, multiline, onBlur, onChange, onFocus, placeholder, value, style, ...additionalProps}) => (
    <TextField
        {...additionalProps}
        fullWidth
        id={id}
        inputProps={additionalProps.maxLength != null ? {maxLength: additionalProps.maxLength} : {}}
        margin="normal"
        multiline={multiline}
        onBlur={onBlur}
        onChange={e => onChange({ value: e.target.value })}
        onFocus={onFocus}
        placeholder={placeholder}
        style={{
            ...style
        }}
        value={value !== null ? value : ""}
    />
);

从该文件导出：

export const FORM_OBJECT_DICT = {
    text: FormObjectTextStyled,
    date: FormObjectDate,
    // Others
};

在另一个文件中被调用的位置：

{FORM_OBJECT_DICT["text"]({
    value: editing ? value : getFormObjectDisplayValue(configuration, value),
    onChange: this.onChange
})}

首先，有什么方法可以使用内联样式（不是withStyles()来更改TextField的字体大小，或者如果没有，在这种情况下我将在哪里/如何应用withStyles()？

Answer 1

您可以通过以下方式使用内联样式更改字体大小：

<TextField inputProps={{ style: { fontSize: "5rem" } }} />

关于withStyles的任何事情都不关心组件是函数组件还是类，因此，如果要使用类，可以执行以下操作：

const FormObjectTextStyled = withStyles(styles)(FormObjectText);

，然后访问classes内的FormObjectText道具。

这是显示两种方法的沙箱：