Material UI TextField 下划线的动态宽度的 JSX 语法 React

Question

我想向我的 TextField 组件添加一些填充，所以我将其应用于根 'style' 属性。

但现在下划线不在该区域内，而是向右溢出了填充量。它似乎也忽略了我尝试应用到它的任何左侧或右侧的填充，并且刚好达到容器元素的 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%'
},

Answer 1

width: 'calc(100% - 5px)' 应该可以。

Material UI TextField 下划线的动态宽度的 JSX 语法 React

JSX syntax for dynamic width of Material UI TextField underline React

css

jsx

reactjs

material-ui