我正在嘗試將自定義css應用到材質UI自動完成組件中。具體來說，我想改變輸入字段的字體大小。這是我現在有的:

<Autocomplete
  style={{
    width: 200,
    height: 60,
    marginLeft: 15,
  }}
  options={["foo", "bar"]}
  renderInput={(params) => (
    <TextField
      InputProps={{ style: { fontSize: 30 } }}
      {...params}
      margin="normal"
    />
  )}
/>

我相信我的TextField的樣式是正確的，但是它的CSS被自動完成CSS覆蓋了。感謝任何幫助。提前感謝。

你可以嘗試其中的兩種，

交換這兩條線

InputProps={{ style: { fontSize: 30 } }}
{...params}

存在；成為

{...params}
InputProps={{ style: { fontSize: 30 } }}

這是因為第二{...params}重寫InputProps。

您可以用！重要標記如下:

InputProps={{ style: { fontSize: `30 !important` } }}

您需要放置擴展器參數。輸入提示輸入提示中的輸入提示確保顯示自動完成選項:

InputProps={{ ...params.InputProps, style: { fontSize: `30 !important` } }}

如果有人仍在尋找答案，這就是如何根據Autocomplete API正確地將CSS屬性應用于input元素。 通過這種方法，您可以利用為autocomplete組件的底層元素提供類的可能性。

<Autocomplete 
size={"small"} 
id="box" options={myOptions} 
getOptionLabel={(option: string) => option} 
renderInput={(params) => <TextField {...params} variant="outlined" /> } 
classes={{ input: classes.smallFont }} />

而不是& quot輸入& quot例如，您可以為& quot輸入根& quot在輸入根元素處設置一個類(取決于您想要實現的目標)

您可以通過renderInput函數中的參數來更改類名

const useStyles = makeStyles((theme) => ({     
    comboOptions: {
        fontSize: '12px',
        color: 'red'
    }
}));


    <Autocomplete key={index}
    size="small"
    value={combo.value}
    options={combo.options}
    renderOption={(option) => (
        <Typography className={classes.comboOptions}>{option.name}</Typography>
    )}
    getOptionLabel={(option) => option.name}
    renderInput={(params) => {
        params.inputProps.className = classes.comboOptions
        return <TextField
            {...params} label={combo.text}
            variant="outlined"
        />
    }
    }
    onChange={(event, newValue) => {
        combo.onChange(newValue)
    }}
/>

在我的情況下，我需要增加標簽的字體大小，我通過以下方式解決了這個問題

解決方案:

TextFieldProps={{
    error: props.error,
    helperText: props.helperText,
    InputLabelProps: {
        required: props.required,
        style: {
            fontSize: 18,
        },
    },
}}

詳細解決方案:

<Autocomplete
    freeSolo
    fullWidth={true}
    label={props.label}
    margin={'noraml'}
    multiple={false}
    name={props.name}
    isOptionEqualToValue={useCallback((option, value) => option.label === value.label, [])}
    value={props.value}
    options={props.options}
    ref={selectRef}
    placeholder={props.placeholder}
    disabled={props.disabled}
    TextFieldProps={{
        error: props.error,
        helperText: props.helperText,
        InputLabelProps: {
            required: props.required,
            style: {
                fontSize: 18,
            },
        },
    }}
    renderInput={useCallback(params => (
        <TextField {...params} variant='standard'/>
    ), [])}
    onChange={useCallback((e, v) => {
        if (typeof v === 'object' && v !== null) {
            _onChange(e, v)
        } else {
            _onChange(e, {label: ''})
        }
    }, [])}
/>

<Autocomplete
        id="combo-box-demo"
        options={top100Films}
        renderOption={(option) => (
          <Typography style={{ fontSize: "1.5rem" }}>{option.title}</Typography>
        )}
        getOptionLabel={(option) => option.title}
        style={{ width: 300 }}
        renderInput={(params) => (
          <TextField
            {...params}
            label="Combo box"
            variant="outlined"
            inputProps={{ ...params.inputProps, style: { fontSize: "1rem" } }}
          />
        )}
      />

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>