Изменить css компонента реакции на основе реквизита с помощью css-модулей

Вариант 1. Импортируйте все модули стилей, которые, как вы знаете, будете использовать.

Создайте карту ваших импортированных объектов «стиля», которые будут указаны с помощью ids, переданных в реквизите. Просто нужно убедиться, что все объекты «стиля» имеют одинаковые свойства CSS, такие как «оповещение», и, конечно же, используйте защитный шаблон на пути объекта к параметру id, чтобы не было доступа «неопределенный из».

import styles1 from "....";
import styles2 from "....";
...

const stylesMap = {
  style1Id: styles1,
  style2Id: styles2,
  ...
};

...

className={stylesMap[this.props.match.params.id].alert}

Плюсы: загружать все необходимые CSS-модули и, вероятно, немного проще рассуждать и отлаживать.

Минусы: использует больше ресурсов

Вариант 2. Используйте динамический импорт

Создайте асинхронную функцию для «выборки» требуемого модуля CSS и используйте функцию жизненного цикла компонента или хук эффекта для обновления ссылки на объект стиля.

const loadStyle = async (...params) => {
  try {
    const styleObject = await import(...path and module name from params);
    // setState or useState setter to set style object
  } catch {
    // set a fallback style object
  }
}
...

componentDidMount() {
  // check props.match.params.id
  // gather up other CSS module path details
  // trigger dynamic CSS module load
  loadStyle(... CSS module path detials);
}
**OR**
useEffect(() => {
  // check props.match.params.id
  // gather up other CSS module path details
  // trigger dynamic CSS module load
  loadStyle(... CSS module path detials);
}, [props.match.params.id, ...any other dependencies]);

...

className={stylesMap[<this.>state.styleObject].alert}

Плюсы: Меньший размер/меньшее использование ресурсов.

Минусы: возможно, большая задержка при рендеринге, поскольку ресурсы не извлекаются заранее.

Примечание. Также все зависит от использования вашего приложения, потребностей и требований. Например, если это связанное приложение (например, Cordova/PhoneGap, Electron и т. д.), то более разумно включить в него все необходимые ресурсы.