fkn+antitotal

kebab-case (Шашлычная нотация) - подход, когда для разделения слов в составных названиях используют дефисы, например название типа "самая главная кнопка", в
это нотации будет записано как:

самая-главная-кнопка

Почему "шашлычная" в принципе понятно: слова как бы нанизаны на ось линии, которую можно построить если объединить все дефисы (как бы видимые части шампура)) между ними одной чертой.

Неплохой заменой Container с его непонятно как управляемым maxWidth:

Используйте компонент FormHelperText.

• API:https://material-ui.com/api/form-helper-...
• Примеры: https://material-ui.com/components/text-...

В чем разница фигурных (объектных) и квадратных скобок массов:

 // получение в константе classes свойства   props.classes
const { classes, bit1: bit2 } = props;

// получение первых двух элементов myArr в переменных value и value2 соответственно.
const [value, value2] = myArr;

Сработает решение вроде:

import {
   BrowserRouter as Router,
   Route,
   Switch, 
   Redirect,
} from "react-router-dom";

<Router>             
   <Switch>
      <Redirect exact from="/" to='/index'} />
      <Route path='login' component={Login2} />
   </Switch>
</Router>

-- для того чтобы работал from нужно:

Например:

В Symfony 4.3 можно использовать вызов (webpack.config.js):

Encore
    .addAliases({ // псевдонимы путей для более удобной загрузки 
// вне зависимости от уровня вложенности файл в приложении
        '@universal': path.resolve(__dirname, 'assets/js/react/components/universal'),
      },
    );

После чего вместо путей типа:

import FormSection from '../../../universal/form/FormSection'

использовать:

Например (в стиле хуков):

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';


const styles = theme => ({
    formSection: {
        'margin-top': '20px',
    }
});

function FormSection(props) {
    const { classes } = props;

    return (
        <div className={classes.formSection}>
            {props.children} 
        </div>
    );
}

FormSection.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(FormSection);

import { makeStyles } from '@material-ui/core/styles';
//............


const useStyles = makeStyles(theme => ({
  '@global': {
    body: {
      backgroundColor: theme.palette.common.white,
    },
  },
  paper: {
    marginTop: theme.spacing(8),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: theme.palette.secondary.main,
  },
  form: {
    width: '100%', // Fix IE 11 issue.
    marginTop: theme.spacing(1),
  },
  submit: {
    margin: theme.spacing(3, 0, 2),
  },
}));

Как минимум потребуются:

npm install @material-ui/core
npm install @material-ui/icons