[Solved]-Type 'undefined' cannot be used as an index type-Reactjs

unfortunately, you cannot force map to have non-undefined return type. so you need to replace it with a simple object and assign a record type to it.

also i would recommend you to create a type union colormapkeys where you should define all possible keys.

type colormapkeys = 'standard' | 'accent' | 'neutral' | 'flat' | 'text' | 'disabled';

type colormap = record<colormapkeys, colorsinterface>;

const colormap: colormap = {
  'standard': { bgcolor: 'primarynormal', textcolor: 'white' },
  'accent': { bgcolor: 'accentnormal', textcolor: 'white' },
  'neutral': { bgcolor: 'grayextradark', textcolor: 'white' },
  'flat': { bgcolor: 'white', textcolor: 'primarynormal' },
  'text': { bgcolor: 'white', textcolor: 'grayextradark' },
  'disabled': { bgcolor: 'graylight', textcolor: 'graydark' },
};

export const buttonwrapper = styled.button<buttoninterface>`
${(props: props) =>
    props.buttontype &&
    css`
      background-color: ${props.theme.colors[colormap[props.buttontype].bgcolor]};
      color: ${colormap[props.buttontype].textcolor};
    `}  
`;

now everything will work fine