如何在 React Material UI TextField 中居中占位符和文本

Question

當前設計：

預期設計：

TextField 標簽如下所示：

<TextField
        multiline={false}
        autoFocus
        placeholder={props.defaultAmt}
        helperText="Enter amount to pay"
        margin="normal"
        InputProps={{
            startAdornment: <InputAdornment position="start">₹</InputAdornment>
        }}
        />

我想將所有內容置於 TextField 的中心。 我試過使用textAlign: 'center'但它不起作用。

Answer 1

您可以覆蓋InputAdornment組件中的positionStart規則，邊距百分比取決於您的大小和影響您的文本字段樣式的其他參數。 我會建議這樣的事情（我假設你正在生成你的 styles 與makeStyles ，但通過你自己的方式進行調整）。

要使 helperText 居中，只需將 Typography 組件添加到 prop 中，因為它是節點類型。 向 Typography 組件添加樣式以使文本居中，它應該可以工作：

const useStyles = makeStyles(() => ({
  centerAdornment: {
    marginLeft: "50%" // or your relevant measure
  },
  centerText: {
    textAlign: "center"            
  }
}));

最重要的是：

<TextField
    multiline={false}
    autoFocus
    placeholder={props.defaultAmt}
    helperText={
                  <Typography 
                    variant="caption" 
                    className={classes.centerText}
                    display="block"
                  >
                      Enter amount to pay
                  </Typography>
               }
    margin="normal"
    InputProps={{
        startAdornment: (
            <InputAdornment 
                 position="start"
                 classes={{ positionStart: classes.centerAdornment}}
            >
                ₹
            </InputAdornment>
    }}
/>

Answer 2

您可以設置 Child div alignment 並減小 TextBox 寬度來實現此目的。 創造這樣的風格，

const styles = {
   textBox: {
   "& $div": {
        justifyContent: "center",
       "& $input": {
          width: "30%"
        }
     },
   "& $p": {
      alignSelf: "center"
   }
}
};

然后將樣式設置為 TextField

<TextField
   className={props.classes.textBox}
   multiline={false}
   autoFocus
   placeholder={"5000"}
   helperText="Enter amount to pay"
   margin="normal"
   InputProps={{
       startAdornment: <InputAdornment position="start">₹</InputAdornment>
      }}
  />

這是有效的 CodeSandbox 示例。

Answer 3

對於助手，簡單的做：

<TextField
...
error={isError}
helperText={errorMessage}
FormHelperTextProps={{
  style: {
    textAlign: 'center'
  }
}}
/>

Answer 4

hintStyle={{ width: '600px', textAlign: 'center' }}

添加此道具並嘗試