I have the following code I am trying to port to TypeScript:
import { styled } from '@mui/material/styles';
export const Logo = styled((props) => {
const { variant, ...other } = props;
I am getting the error:
TS2339: Property 'variant' does not exist on type '{}'.
I look at the styled function first to try to figure out the type and see that it is taking a Component generic.
In WebStorm, go to declaration on styled() function brings me here which seems odd as I do not see that function name here...
<C extends React.JSXElementConstructor<React.ComponentProps<C>>>(
component: C,
options?: StyledOptions<PropsOf<C> & MUIStyledCommonProps> & MuiStyledOptions,
): CreateStyledComponent<PropsOf<C> & MUIStyledCommonProps, {}, {}, Theme>;
Go to declaration on styled from the import brings me here:
declare const styled: CreateMUIStyled<Theme>;
I try to modify my code to
import {CreateMUIStyled, styled, Theme} from '@mui/material/styles';
import PropTypes from 'prop-types';
export const Logo = styled((props: CreateMUIStyled<Theme>) => {
const { variant, ...other } = props;
resulting in error:
TS2339: Property 'variant' does not exist on type 'CreateMUIStyled '
How do I debug this myself on a case by case basis?. Part of that is my perhaps trudging through and getting used to each error.
Then on this specific issue, what is the type on props so there is a variant to break off?
The full JavaScript file (not sure if Logo.defaultProps at bottom helps as that doesn't compile either) ->
import {styled} from '@mui/material/styles';
import PropTypes from 'prop-types';
export const Logo = styled((props) => {
const { variant, ...other } = props;
const color = variant === 'light' ? '#C1C4D6' : '#5048E5';
return (
<svg
width="42"
height="42"
viewBox="0 0 42 42"
xmlns="http://www.w3.org/2000/svg"
{...other}>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M22.6744 4.50247L31.9038 9.66459C32.117 9.78381 32.2944 9.95738 32.4178 10.1674C32.5413 10.3775 32.6064 10.6164 32.6064 10.8597C32.6064 11.1031 32.5413 11.342 32.4178 11.5521C32.2944 11.7621 32.117 11.9357 31.9038 12.0549L22.6745 17.2172C22.0854 17.5467 21.4212 17.7198 20.7456 17.7198C20.0698 17.7198 19.4056 17.5467 18.8166 17.2172L9.5873 12.0549C9.37415 11.9357 9.1967 11.7621 9.0732 11.5521C8.94971 11.342 8.8846 11.1031 8.8846 10.8597C8.8846 10.6164 8.94971 10.3775 9.0732 10.1674C9.1967 9.95738 9.37415 9.78381 9.5873 9.66459L18.8166 4.50247C19.4056 4.17301 20.0698 4 20.7456 4C21.4212 4 22.0854 4.17301 22.6744 4.50247Z"
fill={color}
/>
<path
opacity="0.7"
d="M22.6244 9.34853L35.8422 16.7415C36.0554 16.8607 36.2328 17.0343 36.3563 17.2443C36.4798 17.4544 36.5449 17.6933 36.5449 17.9366C36.5449 18.18 36.4798 18.419 36.3563 18.629C36.2328 18.8391 36.0554 19.0126 35.8422 19.1319L22.6244 26.5248C22.0355 26.8541 21.3712 27.0272 20.6956 27.0272C20.0199 27.0272 19.3557 26.8541 18.7667 26.5248L5.54893 19.1319C5.33578 19.0126 5.15833 18.8391 5.03483 18.629C4.91133 18.419 4.84623 18.18 4.84623 17.9366C4.84623 17.6933 4.91133 17.4544 5.03483 17.2443C5.15833 17.0343 5.33578 16.8607 5.54893 16.7415L18.7667 9.34853C19.3557 9.01916 20.0199 8.84615 20.6956 8.84615C21.3712 8.84615 22.0355 9.01916 22.6244 9.34853Z"
fill={color}
/>
<path
opacity="0.4"
d="M22.9257 14.1939L41.2984 24.4703C41.5113 24.5894 41.6884 24.7626 41.8117 24.9724C41.935 25.182 42 25.4206 42 25.6636C42 25.9065 41.935 26.1451 41.8117 26.3548C41.6884 26.5645 41.5113 26.7378 41.2984 26.8568L22.9257 37.1329C22.3377 37.4618 21.6745 37.6346 21 37.6346C20.3254 37.6346 19.6623 37.4618 19.0743 37.1329L0.701542 26.8568C0.488743 26.7378 0.311581 26.5645 0.188286 26.3548C0.0649948 26.1451 0 25.9065 0 25.6636C0 25.4206 0.0649948 25.182 0.188286 24.9724C0.311581 24.7626 0.488743 24.5894 0.701542 24.4703L19.0743 14.1939C19.6623 13.8651 20.3254 13.6923 21 13.6923C21.6745 13.6923 22.3377 13.8651 22.9257 14.1939Z"
fill={color}
/>
</svg>
);
})``;
Logo.defaultProps = {
variant: 'primary'
};
Logo.propTypes = {
variant: PropTypes.oneOf(['light', 'primary'])
};
My entire package.json is here:
{
"name": "reactpatterns-react",
"version": "0.1.0",
"private": true,
"engines": {
"node": ">=16.14.0 <= 16.14.0",
"npm": ">=8.3.1 <= 8.3.1"
},
"dependencies": {
"@auth0/auth0-spa-js": "1.19.4",
"@emotion/cache": "11.7.1",
"@emotion/react": "11.7.1",
"@emotion/server": "11.4.0",
"@emotion/styled": "11.6.0",
"@fullcalendar/common": "5.10.1",
"@fullcalendar/core": "5.10.1",
"@fullcalendar/daygrid": "5.10.1",
"@fullcalendar/interaction": "5.10.1",
"@fullcalendar/list": "5.10.1",
"@fullcalendar/react": "5.10.1",
"@fullcalendar/timegrid": "5.10.1",
"@fullcalendar/timeline": "5.10.1",
"@mui/icons-material": "5.3.1",
"@mui/lab": "5.0.0-alpha.67",
"@mui/material": "5.4.0",
"@mui/system": "5.4.0",
"@react-pdf/renderer": "2.1.1",
"@reduxjs/toolkit": "1.7.1",
"apexcharts": "3.33.0",
"aws-amplify": "4.3.14",
"date-fns": "2.28.0",
"draft-js": "0.11.7",
"firebase": "9.6.6",
"formik": "2.2.9",
"gray-matter": "4.0.3",
"i18next": "21.6.10",
"iconv-lite": "0.6.3",
"lodash.debounce": "4.0.8",
"next": "12.0.10",
"nprogress": "0.2.0",
"numeral": "2.0.6",
"prop-types": "15.8.1",
"react-apexcharts": "1.3.9",
"react-beautiful-dnd": "13.1.0",
"react-draft-wysiwyg": "1.14.7",
"react-dropzone": "11.2.4",
"react-hot-toast": "2.2.0",
"react-i18next": "11.15.3",
"react-markdown": "8.0.0",
"react-quill": "2.0.0-beta.4",
"react-redux": "7.2.6",
"react-syntax-highlighter": "15.4.5",
"redux": "4.1.2",
"redux-devtools-extension": "2.13.9",
"redux-thunk": "2.4.1",
"simplebar": "5.3.6",
"simplebar-react": "2.3.6",
"stylis": "4.0.13",
"stylis-plugin-rtl": "2.1.1",
"yup": "0.32.11",
"@emotion/react": "11.8.1",
"@emotion/styled": "11.8.1",
"@mui/material": "5.4.4",
"@testing-library/jest-dom": "5.16.2",
"@testing-library/react": "12.1.3",
"@testing-library/user-event": "13.5.0",
"@types/jest": "27.4.0",
"@types/node": "16.11.25",
"@types/react": "17.0.39",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-router-dom": "6.2.1",
"react-scripts": "5.0.0",
"ts-generic-collections-linq": "1.0.7",
"typescript": "4.5.5",
"web-vitals": "2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build:old": "react-scripts build",
"build:prod": "BUILD_PATH='../reactpatterns/src/dist/react' dotenv -e .env.production react-scripts build",
"build:dev": "BUILD_PATH='../reactpatterns/src/dist/react' dotenv -e .env.development react-scripts build",
"build": "echo \"Please use build:dev or build:prod \" && exit 1",
"test": "react-scripts test",
"eject": "react-scripts eject",
"watch": "webpack --watch --progress"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@svgr/webpack": "6.2.1",
"eslint": "8.8.0",
"eslint-config-next": "12.0.10",
"next-transpile-modules": "9.0.0",
"@babel/core": "7.17.5",
"@babel/preset-env": "7.16.11",
"@babel/preset-react": "7.16.7",
"@types/react-dom": "17.0.11",
"babel-loader": "8.2.3",
"css-loader": "6.6.0",
"dotenv-cli": "5.0.0",
"html-webpack-plugin": "5.5.0",
"ts-loader": "9.2.6",
"typescript": "4.5.5",
"webpack": "5.69.1",
"webpack-cli": "4.9.2",
"webpack-dev-server": "4.7.4"
}
}
CodePudding user response：
I looked at the docs and you need to pass a React Component as the first argument of the styled function. In your example you are passing a function component without defining the type of the "props". But the type of "props" default to {} as you can see here. That's why you are getting the error.
So you simply need to provide the type of your props like so:
export const Logo = styled((props: PropTypeOfYourFunctionalComponent) => {
// code of your functional component
});
Where PropTypeOfYourFunctionalComponent is the type of your functional component's React props.