I recently encountered an issue while trying to add padding to my TextField component. I applied the padding to the root 'style' property, but it caused the underline to overflow beyond the designated area to the right by the same amount as the padding. The strange thing is that any padding applied to the left or right of the underline seems to be ignored, and it ends up spanning the entire width of the container element.
To remedy this situation, I decided to set a fixed width for the underline using the underlineStyle prop. However, this solution can become messy if the width needs to be adjusted frequently. My question now is how to express 'width: '100% - 5px' ' in JSX? Is there a way to achieve this using proper syntax?
<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%'
},