Types and Interfaces are ignored in mui/system styled function

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Steps:

1. Download this project:

curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-cra-styled-components-ts
cd material-cra-styled-components-ts

npm install

3. Copy the following code:

import { styled } from '@mui/system';

interface ParagraphProps {
  color: 'green' | 'blue';
}

export const Paragraph = styled('p')<ParagraphProps>(({ color }) => ({
  color: color || '#000',
  fontSize: '18px',
  fontWeight: 'bold',
}));

Paragraph({ color: 'red' });

Current behavior 😯

No errors shown

Expected behavior 🤔

Last line throws

Type '"red"' is not assignable to type '"green" | "blue"'.ts(2769)

Context 🔦

I am trying to provide an Interface/type around which properties and values a MUI Styled Component should admit to avoid issues during the development process and its maintenance, which is one of the key points within the CSS-in-JS concept.

Your environment 🌎

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.