reactjs 如何改变MuiInputBase-root的宽度？

odopli94 于 2023-05-06 发布在 React

关注(0)|答案(2)|浏览(89)

我正在尝试自定义文本输入字段。但是，我在调整文本字段的宽度时遇到了麻烦。更具体地说。我想更改class=“MuiInputBase-root MuiInput-root MuiInputBase formControl MuiInput-formControl”的宽度，因为它被设置为800 px，并且在我的网格之外。但我不知道如何进入并覆盖它？见下图。

const styles = theme => ({
  formControlRoot: {
    border: "2px solid lightgreen",
    width:"50%",
    padding: 2,
    marginTop: 10
  },
  inputRoot: {
    border: "2px solid blue",
    width:"50%",
  },
  inputLabelRoot: {
    border: "2px solid pink",
    width:"50%",
  },
  formHelperTextRoot: {
    border: "2px solid red",
    width:"50%",
  },

  underline: {
      color: 'red' ,

      '&::after': {
        border: '2px solid red',
        width:"50%",
      },
       '&::before': {
        border: '2px solid red',
        width:"50%",
      }
    }
});

<TextField 
        helperText="My Helper Text"
         width="75%"
        classes={{ root: classes.formControlRoot }}
        InputProps={{ classes: { underline: classes.underline }  }}
        InputLabelProps={{ classes: { root: classes.inputLabelRoot } }}
        FormHelperTextProps={{ classes: { root: classes.formHelperTextRoot } }}
      />

reactjs

来源：https://stackoverflow.com/questions/65562637/how-to-change-width-of-muiinputbase-root

2条答案

按热度按时间

a1o7rhls1#

要设置with，可以将类传递给根input-base元素。

<TextField 
  helperText="My Helper Text"
  width="75%"
  InputProps={{ classes: { underline: classes.underline, root:classes.inputRoot }  }}
  InputLabelProps={{ classes: { root: classes.inputLabelRoot } }}
  FormHelperTextProps={{ classes: { root: classes.formHelperTextRoot } }}
/>

这里是useStyle：

const useStyles = makeStyles(() => ({
  inputRoot:{
    width:'300px'
  }
}));

为inputRoot元素提供所需的宽度。
Working codesanbox link：- https://codesandbox.io/s/material-demo-forked-wpqme

赞(0）回复(0）举报 2023-05-06

nr9pn0ug2#

如果要在自动完成中使用时保留输入其他属性，请使用此

renderInput={(params) => (<TextField 
    helperText="My Helper Text"
     width="75%"
    InputProps={{
         ...params.InputProps,
         classes: {
            underline: classes.underline
            root: classes.inputRoot,
         },
    }}
    InputLabelProps={{ classes: { root: classes.inputLabelRoot } }}
    FormHelperTextProps={{ classes: { root: classes.formHelperTextRoot } }}
/>)

赞(0）回复(0）举报 2023-05-06

我来回答

reactjs 如何改变MuiInputBase-root的宽度？

2条答案

相关问题

热门标签

最新问答