Question

我想在TextField组件中添加一些填充，因此我将其应用于root'style'属性。

但是现在下划线并没有停留在该区域内，而是通过填充量溢出到右侧。它似乎也忽略了左边或右边的任何填充，我尝试并适用于它，并且只是100％宽度的容器元素。

我可以使用underlineStyle prop来修复它的宽度，所以现在我只将其设置为95％，但是随着宽度变宽，这会变得有点难看。但我不能为我的生活弄清楚如何在JSX中表达'宽度：'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)'应该有用。

用于动态宽度的材质UI TextField的JSX语法强调React

1 个答案: