第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 Material UI 中的字段之間留出空間?

如何在 Material UI 中的字段之間留出空間?

嗶嗶one 2023-09-25 16:54:01
我是 Material UI 的新手,我的目標(biāo)是在每個文本字段之間留出空格,我已經(jīng)留出了空格,但它不起作用。誰能幫助我在文本字段之間留出空間?這是代碼:import React from "react";import Grid from "@material-ui/core/Grid";import { makeStyles, withStyles } from "@material-ui/core/styles";import TextField from "@material-ui/core/TextField";const styles = theme => ({  root: {    "& > *": {      margin: theme.spacing(1),      width: "25ch"    }  }});class TextFields extends React.Component {  render() {    const { classes } = this.props;    return (      <Grid>        <form className={classes.root} noValidate autoComplete="off">          <Grid item spacing={3}>            <TextField label="First Name" variant="outlined" />          </Grid>          <Grid item spacing={3}>            <TextField label="Last Name" variant="outlined" />          </Grid>          <Grid item spacing={3}>            <TextField label="Address" variant="outlined" />          </Grid>          <Grid item spacing={3}>            <TextField label="Email" variant="outlined" />          </Grid>        </form>      </Grid>    );  }}export default withStyles(styles)(TextFields);“ https://codesandbox.io/s/material-demo-kcn7d ”
查看完整描述

1 回答

?
拉莫斯之舞

TA貢獻(xiàn)1820條經(jīng)驗 獲得超10個贊

一些注意點

  • 方向設(shè)置為column

  • 父網(wǎng)格設(shè)置為container

  • 使用添加距離spacing

<Grid container direction={"column"} spacing={5}>

  <Grid item>

    <TextField label="First Name" variant="outlined" />

  </Grid>

  <Grid item>

    <TextField label="Last Name" variant="outlined" />

  </Grid>

  <Grid item>

    <TextField label="Address" variant="outlined" />

  </Grid>

  <Grid item>

    <TextField label="Email" variant="outlined" />

  </Grid>

</Grid>

https://img1.sycdn.imooc.com//65114af900018ea909640589.jpg

如果你在瀏覽器開發(fā)者模式下查看dom結(jié)構(gòu),你會發(fā)現(xiàn)空間已經(jīng)解決了。并且各個字段之間的空格是相等的,之所以顯示不同是因為有外部元素。



查看完整回答
反對 回復(fù) 2023-09-25
  • 1 回答
  • 0 關(guān)注
  • 114 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號