Reactjs 使用材质ui进行组件对齐
我从React开始，我使用material ui构建表单，我无法解决组件中对齐的细节，因为表单有很多字段，它变得有点“混乱”，所以我想看看它是否改善了组件的对齐 细节是，当有两列（xs=1和xs=5-“6列”）时，当有两列（xs=2和xs=4-“6列”）时，它不会给出与下面行相同的对齐方式 我找到的关于它的最接近的研究，是在这个链接上，但是我仍然不能正确地得到这个细节 下面是一段项目代码和一份打印件，试图更好地说明这个问题Reactjs 使用材质ui进行组件对齐,reactjs,material-ui,Reactjs,Material Ui,我从React开始，我使用material ui构建表单，我无法解决组件中对齐的细节，因为表单有很多字段，它变得有点“混乱”，所以我想看看它是否改善了组件的对齐 细节是，当有两列（xs=1和xs=5-“6列”）时，当有两列（xs=2和xs=4-“6列”）时，它不会给出与下面行相同的对齐方式 我找到的关于它的最接近的研究，是在这个链接上，但是我仍然不能正确地得到这个细节 下面是一段项目代码和一份打印件，试图更好地说明这个问题 [return ( <Form onSubmi
[return (
<Form onSubmit={handleSubmit}>
<Card className={classes.root}>
<CardContent>
<Grid container alignContent='stretch' spacing={0}> {/*Início Primeiro Container ( Linha )*/}
<Grid item xs={1}>
<Controls.Input
name="conCodigo"
label="Código"
size={sizeBox}
value={values.conCodigo}
onChange={handleInputChange}
/>
</Grid>
<Grid item xs={5}>
<Controls.Input
name="conNome"
label="Nome Contribuinte"
size={sizeBox}
value={values.conNome}
onChange={handleInputChange}
error={errors.conNome}
/>
</Grid>
<Grid item xs={2}>
<Controls.Input
label="Fone 1"
name="conFone1"
size={sizeBox}
value={values.conFone1}
onChange={handleInputChange}
error={errors.conFone1}
/>
</Grid>
<Grid item xs={2}>
<Controls.Input
label="Fone 2"
name="conFone2"
size={sizeBox}
value={values.conFone2}
onChange={handleInputChange}
/>
</Grid>
<Grid item xs={2}>
<Controls.Input
label="Fone 3"
name="conFone3"
size={sizeBox}
value={values.conFone3}
onChange={handleInputChange}
/>
</Grid>
</Grid> {/*Fim Primeiro Container */}
<Grid container alignContent='stretch' spacing={0}>
<Grid item xs={4}>
<Controls.Input
label="Contato"
name="conContato"
size={sizeBox}
value={values.conContato}
onChange={handleInputChange}
/>
</Grid>
<Grid item xs={2}>
<Controls.Select
label="Fís./Jur."
name="conFisJur"
value={values.conFisJur}
onChange={handleInputChange}
options={contribuinteService.getFisJur()}
/>
</Grid>
<Grid item xs={4}>
<Controls.Input
label="CPF/CNPJ"
name="conCpfCnpj"
size={sizeBox}
value={values.conCpfCnpj}
onChange={handleInputChange}
/>
</Grid>
<Grid item xs={2}>
<Controls.Input
label="Teste"
name="conCpfCnpj"
size={sizeBox}
value={values.conCpfCnpj}
onChange={handleInputChange}
/>
</Grid>
</Grid>
</CardContent>
</Card>
<Card className={classes.root}>
<CardContent>
<Grid container> {/*Início Segundo Container */}
<Grid item xs={6}>
<Controls.Input
label="E-mail"
name="conEmail"
size={sizeBox}
value={values.conEmail}
onChange={handleInputChange}
error={errors.conEmail}
/>
</Grid>
<Grid item xs={2}>
<Controls.Select
name="conTipoDoac"
label="Tipo Doação"
size={sizeBox}
value={values.conTipoDoac}
onChange={handleInputChange}
options={contribuinteService.getTipoDoacao()}
/>
</Grid>
<Grid item xs={2}>
<Controls.Select
name="conCategoria"
label="Categoria"
size={sizeBox}
value={values.conCategoria}
onChange={handleInputChange}
options={contribuinteService.getCategoria()}
/>
</Grid>
<Grid item xs={2}>
<Controls.Select
name="conSexo"
label="Sexo"
size={sizeBox}
value={values.conSexo}
onChange={handleInputChange}
options={contribuinteService.getGenero()}
/>
</Grid>
</Grid> {/*Fim Segundo Container */}
</CardContent>
</Card>]
[返回](
{/*Início Primeiro集装箱（林哈）*/}
{/*Fim Primeiro容器*/}
{/*Início Segundo容器*/}
{/*Fim Segundo容器*/}
]
[1][1]: https://i.stack.imgur.com/nyWOm.png您需要为
网格容器添加间距，使您的列在布局中均匀。我看到您有3网格容器
复制下面的代码，这将修复布局
<Grid container alignContent='stretch' spacing={1}>
<Grid container alignContent='stretch' spacing={1}>
<Grid container alignContent='stretch' spacing={1}>
复制以下代码并重试。谢谢
[return (
<Container component="main" maxWidth="xl">
<Form onSubmit={handleSubmit}>
<Card className={classes.root}>
<CardContent>
<Grid container alignContent='stretch' spacing={1}> {/*Início Primeiro Container ( Linha )*/}
<Grid item xs={1}>
<Controls.Input
name="conCodigo"
label="Código"
size={sizeBox}
value={values.conCodigo}
onChange={handleInputChange}
/>
</Grid>
<Grid item xs={5}>
<Controls.Input
name="conNome"
label="Nome Contribuinte"
size={sizeBox}
value={values.conNome}
onChange={handleInputChange}
error={errors.conNome}
/>
</Grid>
<Grid item xs={2}>
<Controls.Input
label="Fone 1"
name="conFone1"
size={sizeBox}
value={values.conFone1}
onChange={handleInputChange}
error={errors.conFone1}
/>
</Grid>
<Grid item xs={2}>
<Controls.Input
label="Fone 2"
name="conFone2"
size={sizeBox}
value={values.conFone2}
onChange={handleInputChange}
/>
</Grid>
<Grid item xs={2}>
<Controls.Input
label="Fone 3"
name="conFone3"
size={sizeBox}
value={values.conFone3}
onChange={handleInputChange}
/>
</Grid>
</Grid> {/*Fim Primeiro Container */}
<Grid container alignContent='stretch' spacing={1}>
<Grid item xs={4}>
<Controls.Input
label="Contato"
name="conContato"
size={sizeBox}
value={values.conContato}
onChange={handleInputChange}
/>
</Grid>
<Grid item xs={2}>
<Controls.Select
label="Fís./Jur."
name="conFisJur"
value={values.conFisJur}
onChange={handleInputChange}
options={contribuinteService.getFisJur()}
/>
</Grid>
<Grid item xs={4}>
<Controls.Input
label="CPF/CNPJ"
name="conCpfCnpj"
size={sizeBox}
value={values.conCpfCnpj}
onChange={handleInputChange}
/>
</Grid>
<Grid item xs={2}>
<Controls.Input
label="Teste"
name="conCpfCnpj"
size={sizeBox}
value={values.conCpfCnpj}
onChange={handleInputChange}
/>
</Grid>
</Grid>
</CardContent>
</Card>
<Card className={classes.root}>
<CardContent>
<Grid container alignContent='stretch' spacing={1}> {/*Início Segundo Container */}
<Grid item xs={6}>
<Controls.Input
label="E-mail"
name="conEmail"
size={sizeBox}
value={values.conEmail}
onChange={handleInputChange}
error={errors.conEmail}
/>
</Grid>
<Grid item xs={2}>
<Controls.Select
name="conTipoDoac"
label="Tipo Doação"
size={sizeBox}
value={values.conTipoDoac}
onChange={handleInputChange}
options={contribuinteService.getTipoDoacao()}
/>
</Grid>
<Grid item xs={2}>
<Controls.Select
name="conCategoria"
label="Categoria"
size={sizeBox}
value={values.conCategoria}
onChange={handleInputChange}
options={contribuinteService.getCategoria()}
/>
</Grid>
<Grid item xs={2}>
<Controls.Select
name="conSexo"
label="Sexo"
size={sizeBox}
value={values.conSexo}
onChange={handleInputChange}
options={contribuinteService.getGenero()}
/>
</Grid>
</Grid> {/*Fim Segundo Container */}
</CardContent>
</Card>
</Form>
</Container>
)
[返回](
{/*Início Primeiro集装箱（林哈）*/}
{/*Fim Primeiro容器*/}
{/*Início Segundo容器*/}
{/*Fim Segundo容器*/}
)
最后，对齐工作成功了，问题是它有一个额外的布局，用于“级联”。如果是100%，则之前是90%，因此它不对齐，甚至正确调整布局，如前一个答案所示
const useStyles = makeStyles(theme => ({
root: {
'& .MuiFormControl-root': {
width: '100%',
margin: theme.spacing(0)
}
},
}))
我将把代码留在这里，这样它对解决这个问题的其他人会很有用
[return (
<Form onSubmit={handleSubmit}>
<Card className={classes.root}>
<CardContent>
<Grid container alignContent='stretch' spacing={0}> {/*Início Primeiro Container ( Linha )*/}
<Grid item xs={1}>
<Controls.Input
name="conCodigo"
label="Código"
size={sizeBox}
value={values.conCodigo}
onChange={handleInputChange}
/>
</Grid>
<Grid item xs={5}>
<Controls.Input
name="conNome"
label="Nome Contribuinte"
size={sizeBox}
value={values.conNome}
onChange={handleInputChange}
error={errors.conNome}
/>
</Grid>
<Grid item xs={2}>
<Controls.Input
label="Fone 1"
name="conFone1"
size={sizeBox}
value={values.conFone1}
onChange={handleInputChange}
error={errors.conFone1}
/>
</Grid>
<Grid item xs={2}>
<Controls.Input
label="Fone 2"
name="conFone2"
size={sizeBox}
value={values.conFone2}
onChange={handleInputChange}
/>
</Grid>
<Grid item xs={2}>
<Controls.Input
label="Fone 3"
name="conFone3"
size={sizeBox}
value={values.conFone3}
onChange={handleInputChange}
/>
</Grid>
</Grid> {/*Fim Primeiro Container */}
<Grid container alignContent='stretch' spacing={0}>
<Grid item xs={4}>
<Controls.Input
label="Contato"
name="conContato"
size={sizeBox}
value={values.conContato}
onChange={handleInputChange}
/>
</Grid>
<Grid item xs={2}>
<Controls.Select
label="Fís./Jur."
name="conFisJur"
value={values.conFisJur}
onChange={handleInputChange}
options={contribuinteService.getFisJur()}
/>
</Grid>
<Grid item xs={4}>
<Controls.Input
label="CPF/CNPJ"
name="conCpfCnpj"
size={sizeBox}
value={values.conCpfCnpj}
onChange={handleInputChange}
/>
</Grid>
<Grid item xs={2}>
<Controls.Input
label="Teste"
name="conCpfCnpj"
size={sizeBox}
value={values.conCpfCnpj}
onChange={handleInputChange}
/>
</Grid>
</Grid>
</CardContent>
</Card>
<Card className={classes.root}>
<CardContent>
<Grid container> {/*Início Segundo Container */}
<Grid item xs={6}>
<Controls.Input
label="E-mail"
name="conEmail"
size={sizeBox}
value={values.conEmail}
onChange={handleInputChange}
error={errors.conEmail}
/>
</Grid>
<Grid item xs={2}>
<Controls.Select
name="conTipoDoac"
label="Tipo Doação"
size={sizeBox}
value={values.conTipoDoac}
onChange={handleInputChange}
options={contribuinteService.getTipoDoacao()}
/>
</Grid>
<Grid item xs={2}>
<Controls.Select
name="conCategoria"
label="Categoria"
size={sizeBox}
value={values.conCategoria}
onChange={handleInputChange}
options={contribuinteService.getCategoria()}
/>
</Grid>
<Grid item xs={2}>
<Controls.Select
name="conSexo"
label="Sexo"
size={sizeBox}
value={values.conSexo}
onChange={handleInputChange}
options={contribuinteService.getGenero()}
/>
</Grid>
</Grid> {/*Fim Segundo Container */}
</CardContent>
</Card>]
在3个单独的文件中创建，以组成整个布局
模态：
import React from 'react'
import { Dialog, DialogTitle, DialogContent, makeStyles, Typography } from '@material-ui/core';
import Controls from "./controls/Controls";
import CloseIcon from '@material-ui/icons/Close';
const useStyles = makeStyles(theme => ({
dialogWrapper: {
padding: theme.spacing(0),
position: 'absolute',
top: theme.spacing(0)
},
dialogTitle: {
paddingRight: '0px'
}
}))
export default function Modal(props) {
const { title, widthForm, children, openModal, setOpenModal } = props;
const classes = useStyles();
return (
<Dialog open={openModal} maxWidth={widthForm} classes={{ paper: classes.dialogWrapper }}>
<DialogTitle className={classes.dialogTitle}>
<div style={{ display: 'flex' }}>
<Typography variant="h6" component="div" style={{ flexGrow: 1 }}>
{title}
</Typography>
<Controls.ActionButton
color="secondary"
onClick={()=>{setOpenModal(false)}}>
<CloseIcon />
</Controls.ActionButton>
</div>
</DialogTitle>
<DialogContent dividers>
{children}
</DialogContent>
</Dialog>
)
}
从“React”导入React
从“@material ui/core”导入{Dialog，DialogTitle，DialogContent，makeStyles，排版}；
从“/Controls/Controls”导入控件；
从“@material ui/icons/Close”导入CloseIcon；
const useStyles=makeStyles（主题=>({
对话框包装器：{
填充：主题。间距（0），
位置：'绝对'，
顶部：主题。间距（0）
},
对话标题：{
填充右侧：“0px”
}
}))
导出默认功能模式（道具）{
const{title，widthForm，children，openModal，setOpenModal}=props；
const classes=useStyles（）；
返回(
{title}
{setOpenModel（false）}}>
{儿童}
)
}
使用表格：
import React, { useState } from 'react'
import { makeStyles } from "@material-ui/core";
export function useForm(initialFValues, validateOnChange = false, validate) {
const [values, setValues] = useState(initialFValues);
const [errors, setErrors] = useState({});
const handleInputChange = e => {
const { name, value } = e.target
setValues({
...values,
[name]: value
})
if (validateOnChange)
validate({ [name]: value })
}
const resetForm = () => {
setValues(initialFValues);
setErrors({})
}
return {
values,
setValues,
errors,
setErrors,
handleInputChange,
resetForm
}
}
const useStyles = makeStyles(theme => ({
root: {
'& .MuiFormControl-root': {
width: '100%',
margin: theme.spacing(0)
}
},
}))
export function Form(props) {
const classes = useStyles();
const { children, ...other } = props;
return (
<form className={classes.root} autoComplete="off" {...other}>
{props.children}
</form>
)
}
import React，{useState}来自“React”
从“@material ui/core”导入{makeStyles}”；
导出函数useForm（initialFValues，validateOnChange=false，validate）{
const[values，setValues]=使用状态（initialFValues）；
const[errors，setErrors]=useState（{}）；
常量handleInputChange=e=>{
常量{name，value}=e.target
设定值({
价值观
[名称]：值
})
如果（更改）
验证（{[name]：value}）
}
常量重置形式=（）=>{
设置值（初始值）；
setErrors（{}）
}
返回{
价值观
设置值，
错误，
设置错误，
handleInputChange，
重置形式
}
}
const useStyles=makeStyles（主题=>({
根目录：{
“&.MuiFormControl根”：{
宽度：“100%”，
边距：主题。间距（0）
}
},
}))
出口