Material UIの動的幅のJSX構文TextField underline React

Question

TextFieldコンポーネントにパディングを追加して、ルート 'スタイル'プロパティに適用しました。

しかし、今では下線はその領域内にとどまっておらず、パディング量だけ右にオーバーフローしています。それはまた、私が試してそれに適用し、ちょうどコンテナ要素の100％の幅になる左または右のパディングを無視するようだ。

underlineStyle propを使用して幅を修正することができます。今は95％に設定していますが、幅が広がると少し醜いことがあります。しかし、私は私の人生のために、 'width：' 100％〜5px ''をJSXで表現する方法を理解できませんか？
これは可能ですか？私はいくつかの構文が間違っていると確信しています。事前に おかげ

<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 1

width: 'calc(100% - 5px)'は動作するはずです。