SerzN1

var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });
var b = $0.dispatchEvent(event)

`$0` в данном случае текущий выделенный элемент в chrome dev.tools и вместо него можно использовать `document.getElementById` и тп

что дает одно и другое?
CSSinJS - удобное темирование, инкапсуляцию
CSS Modules - инкапсуляцию

из минусов - подход CSSinJS своеобразный сомнительный код

собственно делаем выводы - без разницы если активно не пользоваться темированием

`margin` по горизонтали лишний, в итоге лучше все считать в `%` и в сумме 100 в ряд - это вроде очевидно

думаю исходя из специфики всех платформ нужно просто разделение рендера в самом простом случае или компилятор, можно попробовать скрестить что то из этого
https://github.com/ptmt/react-native-macos (3 из 4)
https://github.com/necolas/react-native-web (3 из 4)
https://github.com/gabrielbull/react-desktop

1. нужно учитывать ожидаемое поведение приложения под каждую платформу:
андроид - перемотка табов смахиванием влево вправо, табы сверху
иос - прокрутка в основном по вертикали и вкладки снизу
2. навигация на андроид может и должна использовать кнопку назад, на иос только 1 кнопка на телефоне
3. плагины дают разный интерфейс работы с нативным апи и как это разрулить - это на ваш выбор

это вроде основное. лучше посмотреть последние дизайн гайды, возможно уже что-то поменялось. в целом все на ваш выбор. никто не заставляет вас делать однотипные приложения на материал фреймворке, но и с другой стороны не ожидаемое поведение нужно продумать чтобы не было конфузов. лучше приложение лепить из элементов, для начала, чем дать дизайнеру резвиться. возможно дизайнер будет опытный и будет знать стайл и поведенческие гайды и не плшлет вас когда речь зайдет об андроиде и его поведении