Material UI - 从功能组件更改 TextField 的字体大小

Question

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

Class定义：

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 的字体大小，或者如果没有，where/how 我会在此应用 withStyles()实例？

Answer 1

您可以通过这种方式更改内联样式的字体大小：

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

withStyles 与您的组件是函数组件还是 class 无关，因此如果您想使用 classes，您可以这样做：

const FormObjectTextStyled = withStyles(styles)(FormObjectText);

然后在 FormObjectText.

中访问 classes 属性

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

Material UI - 从功能组件更改 TextField 的字体大小

Material UI - Change Font Size of TextField from Functional Component

styles

textfield

reactjs

material-ui