Sam Matthews Sam Matthews - 13 days ago 5
React JSX Question

JSX syntax for dynamic width of Material UI TextField underline React

I wanted to add some padding to my TextField component so I applied that to the root 'style' property.

But now the underline isn't staying within that area and is overflowing out to the right by the padding amount. It also seems to ignore any padding left or right I try and apply to it and just goes full 100% width of the container element.

I can fix it's width using the

underlineStyle prop
, so for now I've just set it to 95%, however this can get a bit ugly as the width gets a lot wider. But I can't for the life of me figure out how to express 'width: '100% - 5px' ' in JSX??

Is this possible? I'm sure I just have some syntax wrong.
Thanks in advance

<TextField
inputStyle={styles.inputStyle}
value={props.messageValue}
name={props.name}
onChange={props.handleFieldChange}
errorText={props.messageError}
floatingLabelText={props.floatingLabelText}
underlineStyle={styles.underlineStyle}
floatingLabelStyle={styles.floatingLabelStyle}
floatingLabelFocusStyle={styles.floatingLabelFocusStyle}
**underlineFocusStyle={styles.underlineFocusStyle}**
style={styles.fieldStyle}
>
{props.children}
</TextField>

underlineFocusStyle: {
borderBottom: 'solid 1px',
borderColor: grey50,
width: '95%'
},

Answer

width: 'calc(100% - 5px)' should work.

Comments