CODEWITHSUNDEEP
reactjsstylesmaterial-uitextfield
Chris Schlitt
Chris Schlitt

Reputation: 142

Material UI - Change Font Size of TextField from Functional Component

I have the following functional component and I would like to change the font size of the textfield, but for some reason I can't figure it out. I know if I have a traditional component I can export it withStyles and set the className or InputProps, but I'm not sure how to do that with my current setup:

Class Definition:

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 from that file:

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

Where it is called in another file:

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

Firstly, is there any way to change the font size of the TextField using inline styles (not withStyles()), or if not, where/how would i apply withStyles() in this instance?

Upvotes: 0

Views: 4506

Answers (1)

Ryan Cogswell
Ryan Cogswell

Reputation: 80976

You can change the font size with inline styles this way:

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

There is nothing about withStyles that cares whether your component is a function component or a class, so if you want to use classes, you could do something like:

const FormObjectTextStyled = withStyles(styles)(FormObjectText);

and then access the classes prop inside FormObjectText.

Here's a sandbox showing both approaches:

Edit TextField inline styles

Upvotes: 2

Related Questions