ned4ded

Селектор .col.s12 имеет большую специфичность, чем css-класс из модуля. Чтобы исправить отделите структуру грида от структуры компонента:

import React, {Component} from 'react'
import styles from './Videos.module.css'

export default class Videos extends Component{
    render(){
        return(
            <div id="test1" className={`row ${styles.VideoRoom}`}>
                <div className="col s12 center grey lighten-3">
                   <div className={styles.HostVideo}>
                      Видео хоста
                   </div>
                </div>
            </div>
        );
    }
}

Либо если хотите именно переопределять стили колонки, то попробуйте воспользоваться директивой :global(.class) в css-модулях (подробнее). Должно получиться что-то вроде :global(.col).HostVideo.

О специфичности можно почитать: тут, тут.

Нет, нельзя.

В useContext() нужно передавать ссылку на объект контекста, которую вы не сохранили. В js к необъявленным объектам невозможно получить доступ. Более того, как только ссылка на объект не используется, сам объект удаляется garbage collector'ом.

const MyContext = React.createContext();

const {
    Provider: CompaniesStoreServiceProvider,
    Consumer: CompaniesStoreServiceConsumer
} = MyContext;

useContext(MyContext);

Как вариант, вы можете сделать хелпер/декортатор, который будет создавать контекст и возвращать объект, содержащий ссылку на контекст, провайдер и консьюмер; деструктурировать уже его.

У вас не установлен лоадер для typescript.

Есть 2 варианта, 1ый - ts-loader, 2ой - babel-loader c typescript пресетом.

Я предпочитаю второй, но в таком случае напрямую бабель не будет производить проверку типов и нужно использовать плагин fork-ts-checker. Проверка типов будет происходить параллельно с процессом компиляции вебпака.

Вот пример для бабель-лоадера.

// webpack.config 

module.exports = {
    module: {
        rules: [
            {
                oneOf: [
                    {
                        test: /\.(js|jsx|ts|tsx)$/,
                        exclude: /(node_modules|bower_components)/,
                        loader: 'babel-loader',
                        options: {
                            cacheDirectory: true,
                        },
                    },

                    {
                        use: 'file-loader',
                        exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
                    },

                    // ** STOP ** Are you adding a new loader?
                    // Make sure to add the new loader(s) before the "file" loader.
                ],
            },
        ],
    },

    plugins: [
        new ForkTsCheckerWebpackPlugin({
            async: true,
            useTypescriptIncrementalApi: true,
            checkSyntacticErrors: true,
            eslint: true,
        }),
    ],
};

// babelrc

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-typescript"
    ],
}

Не забудьте установить пресеты, лоадеры и плагин.

PS, можете подсмотреть конфиг для create-react-app, там можно выудить много интересного.

Вам нужен либо стор (Mobx, Redux), либо родительский компонент, внутри которого будет происходит взаимодействие двух дочерних

console.log(Message.state.value);

Здесь вы обращаетесь к статическому свойству класса Message, конечно это не будет работать

Добрый день.

Метод getItem возвращает либо Products, либо undefined, если продукт не найден. Сделайте терминальное условие и укажите строгую типизация для используемого массива далее.

addToCart = (id: number) => {
  let tempProduct: Products[] = [...this.state.products];
  const item = this.getItem(id);
  if(item === undefined) {
    // ... инструкция при возникновении терминального условия, например, ошибка
    return;
  }
  const index = tempProduct.indexOf(item as Products); // строгая типизация для item
        
  // ...
};

Возможно, если вы укажите тип возвращаемого значения, то не потребуется терминальное условие (но это нужно проверить, я так навскидку не могу утверждать со 100% уверенностью). Такой подход подвержен багам при исполнении js.

getItem = (id: number): Products => {
  return this.state.products.find(item => item.id === id);
};

BTW, я бы не стал называть на вашем месте тип Products во мн. ч. Просто Product, т.к. по сути это единичная сущность.