Material UI - Изменить размер шрифта TextField от функционального компонента

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
})}

Во-первых, есть ли способ изменить шрифтразмер TextField с использованием встроенных стилей (не withStyles()), или, если нет, где / как бы я применил withStyles() в этом случае?

Answer 1

Вы можете изменить размер шрифта с помощью встроенных стилей следующим образом:

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

В withStyles нет ничего, что заботится о том, является ли ваш компонент функциональным компонентом или классом, поэтому, если вы хотите использоватьклассы, вы могли бы сделать что-то вроде:

const FormObjectTextStyled = withStyles(styles)(FormObjectText);

и затем получить доступ к classes подпорке внутри FormObjectText.

Вот песочница, показывающая оба подхода: