Выдача центрирующих компонентов в ReactJS

Question

Я работаю с React Native, поэтому я все еще приспосабливаюсь к ReactJS. У меня две кнопки, обычная и иконка. Я хочу расположить обычную кнопку по центру и иметь значок в нижней части экрана. Я пробовал использовать justifyContents: 'center' и аналогичные настройки, как показано в моем коде, но, похоже, это не работает. Весь мой код ниже с комментариями, показывающими, где находится мой код кнопки. Спасибо за любую помощь.

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;

Answer 1

Чтобы ответить на ваш вопрос, я думаю, вы его пропустили, но это должно было быть justifyContent, а не justifContent.

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

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