Redux-form-material-ui: How change the fontSize of TextField

[aislanmaia]

I'm struggling to change this simple thing.

Changing by className is not enough as it didn't get applied.
For UX reason, I'm trying to increase the size because it's too small.
Already trying to get FormControl, InputLabel and Input to modify its classes by it's hard because the elements itself get out of sync in your spacing calculations.

Somebody can help me out, please ??

Edit: _I'm using the Material-UI 1.0-beta and redux-form-material-ui@next_

[lexparsimonet]

You must pass the correct properties to the component, if you are having trouble with the inputStyle prop causing your inputStyle text to overlay the text labels and cause the alignment issues I think you are describing by saying out of 'sync' then it is just a matter of including the props from the Material-ui TextField page .

Check the example below, prop values I picked are arbitrary but larger than the defaults for TextField. You probably need add hintStyle={{ height: 'some numerical value here' }} to line up the hintText. Material-ui renders a <div> root element wrapped around the <label> elements, each piece of the TextField component has to be adjusted.

<Field name="foo" component={TextField} style={{ height: '150px' }} inputStyle={{ fontSize: '1.5rem' }} props={{ floatingLabelText: 'Name', hintText: 'Your full name.', autoFocus: true }} />

[aislanmaia]

Thanks @lexparsimonet for your kind reply. Below is my attempt to get it working:

<Field
    name="email"
    type="email"
    component={TextField}
    placeholder="Email"
    ref={this.saveRef}
    withRef
    style={{ height: "150px "}}
    inputStyle={{ fontSize: '1.6rem' }}
    props={{
        floatingLabelText: 'Email',
        hintText: 'Digite sua senha',
        autofocus: true
    }}
/>

One thing that maybe makes more sense, I'm using the Material-UI 1.0-beta and redux-form-material-ui@next

Trying this code above but the inputStyle object doesn't get applied either.

Here is a print to details:

Just only the style prop is getting applied as expected. Any thoughts ? Thanks again!!!

[lexparsimonet]

That is what you get for using beta distributions...and not reading the documents, or stating your distribution version when asking for help - The inputStyle prop does in fact work with Material-UI v0.19.4.

The 1.0-beta of Material-UI has a different syntax requirements for overriding inline-styles for rendered elements. See Material-UI Docs for v1-beta, customization/overrides/

the Overrides section of the docs URL above shows the identical use of camelcase selector namespaces in an object format,
const style={ selector: 'value', };
-only difference appears to be the repetition of function className(){} export default className; which I cannot test for you as I am using a stable distribution.

or or or.... use the more complex but far superior CSS in JS methodology.

[aislanmaia]

Thank for your help @lexparsimonet . I've already accomplished through the inputClassName prop that I overlooked in the docs.
CSS in JS is nice and I'm just beginning to learn how to use it and I'm liking it a lot.

[kennblvnp]

in 2020 this doesnt work:

InputProps={{
classes: {
input: {fontSize:1},
},
]}}

[Tesfit12]

definitely it is not working.