材質UI的動態寬度的JSX語法TextField下劃線反應

我想添加一些填充到我的TextField組件，所以我將它應用於根'style'屬性。材質UI的動態寬度的JSX語法TextField下劃線反應

但是現在下劃線不在該區域內，並且通過填充量溢出到右邊。它也似乎忽略任何填充左側或右側，我嘗試應用它，並只是完全100％的容器元素的寬度。

我可以使用underlineStyle prop修復它的寬度，所以現在我只是將其設置爲95％，但是隨着寬度變得更寬，這可能會變得有點難看。但我不能在我的生活中弄清楚如何在JSX中表達'width：'100％ - 5px''？
這可能嗎？我相信我只是有一些語法錯誤。在此先感謝

<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%' 
},

來源

2016-11-22 Sam Matthews

請張貼您的可疑代碼。 – Sachith

好的，謝謝我剛剛收錄了相關的代碼，以保持簡短 –

width: 'calc(100% - 5px)'應該工作。

來源

2016-11-22 08:33:28

非常感謝！只是沒有關於語法的線索。再次感謝 –

沒問題，很高興我可以幫忙！如果你的屬性值是一個字符串，它將表現爲正常的CSS。舉個例子：'padding：'5px''將變成'padding：5px'。但是如果你只輸入一個數字，它會自動將其轉換爲px。 'padding：10'變成'padding：10px' –

確定gotcha感謝了很多澄清:) –

材質UI的動態寬度的JSX語法TextField下劃線反應

回答

相關問題