如何解决使用 Gatsby + Material UI试图制作一个导航栏,但按钮居中我究竟做错了什么?
我用谷歌搜索了几个小时,但找不到任何东西。
这是我的导航栏组件的代码:
// Parent Component
class Example extends Component {
constructor(props) {
super(props);
this.state = { ranNum1: 0,ranNum2: 0 };
this.handleChange = (num,uid) => {
this.state[uid] = num;
};
this.handleGrabNums = () => {
console.log(this.state);
};
}
render() {
return (
<React.Fragment>
<Helmet>
<title>{this.state.title}</title>
</Helmet>
<div className="container">
<div className="col s12" id="create-room-block">
<h1 className="center-align" id="create-room-title">
Grab Random Number
</h1>
<h5 className="center-align" id="create-room-desc">
<b>
Click the button to grab the 2 random generated number from the
child components
</b>
</h5>
<h5 className="center-align" id="create-room-desc">
Catch is the button is located in the parent component
</h5>{" "}
<br />
<Random
stage="first"
uid="ranNum1"
handleChange={this.handleChange}
/>
<Random
stage="second"
uid="ranNum2"
handleChange={this.handleChange}
/>
<br />
<br />
<hr />
<br />
<p className="center-align">
<button
className="btn"
id="save-num-button"
onClick={this.handleGrabNums}
>
Grab both random numbers
</button>
</p>
</div>
</div>
</React.Fragment>
);
}
}
// Child Component
class Example extends Component {
constructor(props) {
super(props);
this.state = { randomNumber: 0 };
}
render() {
return (
<React.Fragment>
<button onClick={this.generateNumber}>
Generate {this.props.stage} random number
</button>
</React.Fragment>
);
}
generateNumber = () => {
const generatedNumber = Math.floor(Math.random() * 1000);
this.setState({ randomNumber: generatedNumber });
this.props.handleChange(generatedNumber,this.props.uid);
};
}
如您所见,重要的部分是 import React from "react";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import { makeStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
const useStyles = makeStyles(() => ({
toolbar: {
textAlign: "center",},root: {
background: "linear-gradient(45deg,#FE6B8B 30%,#FF8E53 90%)",border: 0,borderRadius: 3,boxShadow: "0 3px 5px 2px rgba(255,105,135,.3)",color: "white",height: 48,padding: "0 30px",}));
const NavBar = () => {
const classes = useStyles();
return (
<div>
<AppBar position="static" color="secondary" elevation={0}>
<Toolbar className={classes.toolbar}>
<Button className={classes.root}>Hook</Button>
</Toolbar>
</AppBar>
</div>
);
};
export default NavBar;
,因为它指的是 js 样式 <Toolbar className={classes.toolbar}>
中的 css。我的结果是按钮在左侧,而不是中间。这是要显示的图片:
解决方法
Junaid 已经解决了,工具栏:应该是:
toolbar: {
dislay: "flex",justifyContent: "center"
},
它使用 flexbox 来简化布局。详情请见 css-tricks。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。