How to style the same component in two ways using CSS modules in react with typescript?

Question

With the info I already found on stack overflow I already tried the following: I have created a NavbarList component, which I am both using in NavbarDesktop as well as in SideDrawer (in NavbarMobile component). I want the NavbarList to be styled differently depending on the component in which it is added. For this, I am passing a prefix as prop to NavbarList, which is a string. I use this prop to build the className for the css modules. I get a typescript error.

// in NavbarDesktop
<NavbarList prefix="header-navbar"/>
// in SideDrawer
<NavbarList closeMenu={close} prefix="sidedrawer-navbar" />
// in NavbarList
import { NavLink } from 'react-router-dom';
import NavbarListScss from './_NavbarList.module.scss';

type NavbarListProps = {
  closeMenu?: () => void;
  prefix: string;
}

const NavbarList = ({closeMenu, prefix} : NavbarListProps) => {
  const listSelector = `${prefix}__list`;
  const itemSelector = `${prefix}__item`;
  const linkSelector = `${prefix}__link`;

  return (   
    <ul className={`${NavbarListScss[${listSelector}]}`}>

I get the following typescript error on listSelector:

'...' expected.ts(1005)
Spread types may only be created from object types.ts(2698)
const listSelector: string

I am a bit confused, because I do not even try to use the spreadoperator in the code that gives the error.

Answer 1

you are trying to use the spread operator (...) on a type that is not an object type. In TypeScript, spread types are allowed only for object types, not for string or number types.

like this: const listSelector: string

The listSelector variable is declared as a string, and later, you're trying to use it in the spread operator:

Here is an example of changing listSelector to an object type:

const listSelector: { [key: string]: string } = {};
<ul className={NavbarListScss[listSelector]}>