reactjs 如何更改Material UI自动完成字体大小?

mzsu5hc0  于 2023-05-06  发布在  React
关注(0)|答案(4)|浏览(181)

我正在尝试将自定义CSS应用到Material 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。任何帮助都很感激。先谢谢你了。

mv1qrgav

mv1qrgav1#

你可以试两个
1.把这两行交换一下

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

成为

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

这是因为第二个{...params}覆盖InputProps
1.您可以使用!important标记更改Inputprops CSS,如下所示:

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

1.您需要将spreader params.InputProps放入InputProps中,以确保显示自动完成选项:

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

cngwdvgl2#

如果有人仍然在寻找答案,这是如何根据Autocomplete API正确地将CSS属性应用于输入元素。使用此方法,您可以利用向自动完成组件的基础元素提供类的可能性。

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

例如,您可以为“inputRoot”指定一个类,以在输入根元素处设置一个类,而不是“input”(取决于您想要实现的目标)

rqcrx0a6

rqcrx0a63#

您可以在renderInput函数中通过参数更改className

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)
    }}
/>
ttygqcqt

ttygqcqt4#

在我的情况下,我有要求,以增加字体大小的标签,我已经解决了以下方式

解决方案:

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: ''})
        }
    }, [])}
/>

相关问题