头球在中间
头球在中间
提问于 2020-08-29 10:42:09
我是reactjs的新手，在ui中遇到了一些问题。我正在尝试将标题居中放置在应用程序栏和navlink之间的空白处。然而，标题不会出现在中间。
正在发生的情况是导航栏占据了顶部的空间，我如何修改它，使标题位于中心。
代码如下：
return (
<MuiThemeProvider theme={theme}>
<React.Fragment>
<div className={useStyles.root}>
<AppBar position="static">
<NavLink to="dashboard">
<ListItem button>
<ListItemIcon>
<DashboardIcon />
</ListItemIcon>
<ListItemText
style={{ color: "#FFFFFF" }}
/>
</ListItem>
</NavLink>
<Typography
gutterBottom
align="center"
style={{ width: "100%", alignItems: "center" }}
>
Best Practices Management System
</Typography>
</AppBar>
</div>
<br />
<Form onSubmit={this.handleSubmit} style={{ marginLeft: "5%" }}>
<Grid container>
<Grid item xs={6}>
<TextField
label="Title"
variant="outlined"
size="small"
name="Title"
id="Title"
placeholder="Enter the Title of the Best Practice"
onChange={handleChange("Title")}
defaultValue={values.Title}
multiline
rows={2}
rowsMax={4}
style={{ width: "90%" }}
/>
<label
id="title"
style={{ visibility: "hidden", color: "red" }}
>
Title must be atleast 5 characters long
</label>
</Grid>
<Grid item xs={6}>
<TextField
placeholder="Enter the details of the Best Practice"
label="Details of Best Practice"
id="Details"
size="small"
name="Details"
onChange={handleChange("Details")}
defaultValue={values.Details}
style={{ width: "90%" }}
variant="outlined"
multiline
rows={2}
rowsMax={4}
/>
<label
id="details"
style={{ visibility: "hidden", color: "red" }}
>
Details of Best Practice must be atleast 10 characters long
</label>
</Grid>
</Grid>
<Grid container>
<Grid item xs={6}>
<TextField
placeholder="What is the Best Practice?"
label="What is the Best Practice"
size="small"
id="What"
name="What"
onChange={handleChange("What")}
defaultValue={values.What}
style={{ width: "90%" }}
variant="outlined"
multiline
rows={2}
rowsMax={4}
/>
<label id="what" style={{ visibility: "hidden", color: "red" }}>
What is the Best Practice must be atleast 10 characters long
</label>
</Grid>
<Grid item xs={6}>
<TextField
placeholder="Why was the Best Practice Implemented"
label="Why was the Best Practice Implemented"
size="small"
name="Why"
id="Why"
onChange={handleChange("Why")}
defaultValue={values.Why}
style={{ width: "90%" }}
variant="outlined"
multiline
rows={2}
rowsMax={4}
/>
<label id="why" style={{ visibility: "hidden", color: "red" }}>
Why was the Best Practice implemented must be atleast 10
characters long
</label>
</Grid>
</Grid>
<Grid container>
<Grid item xs={6}>
<TextField
placeholder="How was the Best Practice Implemented"
label="How was the Best Practice Implemented"
size="small"
name="How"
id="How"
onChange={handleChange("How")}
defaultValue={values.How}
style={{ width: "90%" }}
variant="outlined"
multiline
rows={2}
rowsMax={4}
/>
<label id="how" style={{ visibility: "hidden", color: "red" }}>
How was the Best Practice implemented must be atleast 10
characters long
</label>
</Grid>
<Grid item xs={6}>
<FormControl id="Status" style={{ width: "90%" }} size="small">
<InputLabel
htmlFor="Implementation_Status"
id="Status"
style={{
marginLeft: 10,
top: "50%",
transform: "translate(0,-50%"
}}
>
Implementation Status
</InputLabel>
<Select
labelId="Implementation_Status"
name="Status"
id="Status"
onChange={handleChange("Status")}
defaultValue={values.Status}
variant="outlined"
inputProps={{
id: "Implementation_Status",
name: "age"
}}
>
<MenuItem value="1">Implemented</MenuItem>
<MenuItem value="2">Implementation in Progress</MenuItem>
<MenuItem value="3">Not Implemented</MenuItem>
</Select>
</FormControl>
<label
id="status"
style={{ visibility: "hidden", color: "red" }}
>
Implementation Status cannot be blank
</label>
</Grid>
</Grid>
<Grid container>
<Grid item xs={6}>
<Form.Group controlId="TBD_COST">
<TextField
placeholder="Cost of Implementation of the Best Practice"
label="Cost of Implementation"
name="Cost"
id="Cost"
size="small"
onChange={handleChange("Cost")}
defaultValue={values.Cost}
style={{ width: "90%" }}
variant="outlined"
/>
<label
id="cost"
style={{ visibility: "hidden", color: "red" }}
>
Cost of Implementation cannot be left blank
</label>
</Form.Group>
</Grid>
<Grid item xs={6}>
<TextField
placeholder="Benefits of the Best Practice"
label="Benefits of the Best Practice"
size="small"
name="Benefits"
id="Benefits"
onChange={handleChange("Benefits")}
defaultValue={values.Benefits}
style={{ width: "90%" }}
variant="outlined"
multiline
rows={2}
rowsMax={4}
/>
<label
id="benefits"
style={{ visibility: "hidden", color: "red" }}
>
Benefits must be at least 10 characters long
</label>
</Grid>
</Grid>
<Grid
container
direction="row"
justify="left"
alignItems="left"
style={{ width: "83%" }}
>
<Button
variant="contained"
size="small"
color="primary"
style={styles.button}
onClick={this.continue}
>
Continue
</Button>
<Button
variant="contained"
size="small"
color="primary"
type="submit"
style={styles.button}
>
Submit
</Button>
</Grid>
</Form>
</React.Fragment>
</MuiThemeProvider>
);
}
}我在代码中使用了Ui材料。请帮帮忙
使用样式的代码
常量宽度= makeStyles({根：{宽度："100%"，
maxWidth: 500} })；
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-08-29 11:28:41
您需要使用工具栏包装AppBar组件并删除gutterBottom，如下所示：
<BrowserRouter>
<AppBar position="static">
<Toolbar>
<NavLink to="dashboard">
<DashboardIcon />
</NavLink>
<Typography
align="center"
style={{ width: "100%", alignItems: "center" }}
>
Best Practices Management System
</Typography>
</Toolbar>
</AppBar>
</BrowserRouter>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63642917
复制相关文章
相似问题
腾讯云开发者
