ReactJS 中的问题居中组件答案

【问题标题】：Issue centering components in ReactJSReactJS 中的问题居中组件
【发布时间】：2020-09-15 03:42:43
【问题描述】：

我来自 React Native，所以我还在适应 ReactJS。我有两个按钮，一个普通按钮和一个图标按钮。我想将常规按钮居中并在屏幕底部放置图标按钮。我试过使用 justifyContents: 'center' 和我的代码中显示的类似设置，但它似乎不起作用。我所有的代码都在下面，cmets 显示了我的按钮代码在哪里。感谢您提供任何帮助。

import React, {useState} from 'react';
import SettingsIcon from '@material-ui/icons/Settings';
import { Button , TextField, IconButton} from '@material-ui/core';

function App() {

  const [task, setTask] = useState("");
  const [goals, setGoal] = useState(["test"]);

  const addGoal = () => {
    setGoal([...goals, task]);
  };

  const listItems = goals.map((number) =>
    <li>{goals}</li>
  );

  return (
    <div style={{padding: 50, flexDirection: 'column'}}>

      <div style = {{display: 'flex', fontFamily: 'Roboto', fontSize: 55}}>
        <text>Tuesday</text>
      </div>

      <text style = {{display: 'flex', fontFamily: 'Roboto', fontSize: 45, marginBottom: 50}}>11:45</text>

      <div style = {{marginBottom: 20}}>
        <TextField inputProps={{style: {fontFamily: 'Roboto'}}} InputLabelProps = {{style: {fontFamily: 'Roboto'}}} id="standard-basic" autoComplete='off' label="New Goal"  fullWidth value = {task} onChange = {e => setTask(e.target.task)}/>
      </div>

      //TRYING TO CENTER THIS BUTTON
      <div style = {{display: 'flex', alignSelf: 'center', justifContent: 'center'}}>
        <Button variant="outlined" disableElevation size = "medium">
          Add Goal
        </Button>
      </div>

      <div style = {{flexDirection: 'column', paddingTop: 40}}>
        <ui>listItems</ui>
      </div>

      //TRYING TO HAVE THIS AT THE BOTTOM OF THE PAGE
      <div style = {{display: 'flex', justifContent: 'flex-end'}}>
        <IconButton>
          <SettingsIcon/>
        </IconButton>
      </div>

    </div>
  );
};

export default App;

【问题讨论】：

为什么不为每个元素定义一个类并在不同的 css 页面上设置这些元素的样式？使用这么多内联 css 似乎不是正确的方法。我也认为这是 CSS 的问题，而不是 react js。
我已经按照你的建议添加了一个 CSS 标签，我只是使用内联来了解 ReactJS 中的格式样式。在把它分成类之前，我想以这种形式理解它。
我明白，但我建议你不要养成这种习惯。 :) 祝你好运！
当然，它的组织性要差得多，只是为了学习目的

标签： css reactjs

【解决方案1】：

为了回答你的问题，我想你错过了，但它应该是 justifyContent，而不是 justifContent。

  <div style = {{display: 'flex', alignSelf: 'center', justifyContent: 'center'}}>

  <div style = {{display: 'flex', justifyContent: 'flex-end'}}>

【讨论】：

非常抱歉，这是一个愚蠢的错误
这不是问题。它可能被忽略了。这就是这个平台的用途。如果您有单独的 css 文件而不是内联 css，则会自动显示您的错误。我想说。如果你想在同一个页面中使用 css 并且你想动态地改变你使用 props 的 css，我可以推荐 styled-components。会为你工作。 styled-components.com
我会研究一下这个库。它似乎比我目前使用的方法更有条理。感谢您的所有帮助，我非常感谢