Material UI - 自动完成默认边距？

Question

我是 material-ui 的新手，无法理解自动完成的边距。我有一个结合了自动完成和 TextInput 的表单。但是 Autocomplete 与 TextInput 的放置（对我来说）表现得很奇怪。自动完成是否会呈现某种带有一组边距的“框”，而 TextInput 不会？在这里，我必须在 TextInput 上添加边距以使它们对齐，但我仍然在我想要的自动完成上留下 marginLeft。显然我可以为它添加样式，但这会导致 {xs} 大小在缩放时中断。

正如您在图片中看到的那样，自动完成的边距与 TextInput 相去甚远：

非常感谢任何能让我朝着正确方向前进的东西。

代码如下：

import React, { useState, useEffect } from 'react';
import Autocomplete from '@material-ui/lab/Autocomplete';
import TextField from '@material-ui/core/TextField';
import Grid from '@material-ui/core/Grid';


export default function AddPurchase() {

    const [coinList, setCoinList] = useState([]);
    const [name, setName] = useState('');
    const [symbol, setSymbol] = useState('');
    const [date, setDate] = useState('');
    const [price, setPrice] = useState('');
    const [amount, setAmount] = useState('');


    const data = {
        name: name,
        symbol: symbol,
        date: date,
        price: price,
        amount: amount
    }

    const handleName = (e, value) => {
        if (value !== null) {
            setName(value.substring(0, value.lastIndexOf('-') - 1));
        }
        else {
            setName('')
        }

    }
    const handleSymbol = (e, value) => {
        if (value !== null) {
            setSymbol(value.substring(value.lastIndexOf('-') + 2));
        }
        else {
            setSymbol('');
        }
        console.log(value);
    }

    const handleDate = (e) => {
        setDate(e.target.value);
    }

    const handlePrice = (e) => {
        setPrice(e.target.value);
    }

    const handleAmount = (e) => {
        setAmount(e.target.value);
    }

    const getCoins = useEffect(() => {
        let mounted = true;
        fetch('http://127.0.0.1:5000/api/v1/coins/list')

            .then(res => res.json())
            .then(items => {
                if (mounted) {
                    setCoinList(items)
                }
            })
        return () => mounted = false;
    }, [])

    console.log(data)

    return (

        <form>
            <Grid container >
                <Grid item xs={12} md={3}>
                    <Autocomplete
                        id="get-coin"
                        noOptionsText={'Coin not found...'}
                        options={coinList.map(item => (`${item.name} - ${item.symbol.toUpperCase()}`))}
                        onChange={(e, value) => { handleName(e, value); handleSymbol(e, value) }}
                        renderInput={(params) => (
                            <TextField {...params} label="Add coin" margin="normal" variant="outlined" />
                        )}
                    />
                </Grid>
                <Grid item xs={12} md={3}>
                    <TextField
                        onChange={handleDate}
                        label="Date"
                        variant="outlined"
                        style={{ width: 250 }}
                        margin="normal"
                    >
                    </TextField>

                </Grid>
                <Grid item xs={12} md={3}>
                    <TextField
                        onChange={handlePrice}
                        label="Price"
                        variant="outlined"
                        style={{ width: 250 }}
                        margin="normal"
                    >
                    </TextField>
                </Grid>
                <Grid item xs={12} md={3}>
                    <TextField
                        onChange={handleAmount}
                        label="Amount"
                        variant="outlined"
                        style={{ width: 250 }}
                        margin="normal"
                    >
                    </TextField>
                </Grid>
            </Grid>
        </form>
    );
}

Answer 1

App.css 包含一个我不知道的样式。 Changing/removing 不合适的样式解决了定位问题。

Material UI - 自动完成默认边距？

Material UI - Autocomplete default margin?

html

css

reactjs

autocomplete

material-ui