Getting a typescript error on my styled-component
Type '{ children: string; }' has no properties in common with type 'IntrinsicAttributes'.ts(2559)
import React from 'react'
import { NotificationSuccess, NotificationError } from '../../styles'
interface IProps {
error?: boolean;
message: string;
}
export const Notification = (props: IProps) => {
const Note = () => props.error ? NotificationError : NotificationSuccess;
// Error happens on <Note>
return (<Note>{props.message}</Note>);
}
And the styles:
import styled from 'styled-components';
export const NotificationDiv = styled.div`
z-index: 11;
position: fixed;
left: 50%;
margin-left: -160px;
top: 1rem;
padding: 1.5rem;
width: 320px;
height: auto;
text-align: center;
color: ${props => props.theme.offWhite};
border-radius: 5px;
cursor: pointer;
`
export const NotificationSuccess = styled(NotificationDiv)`
background: ${props => props.theme.green};
`
export const NotificationError = styled(NotificationDiv)`
background: ${props => props.theme.red};
`
I found this answer here, and I did upgrade my package.json to the following, but that still didn't help:
Why this wrapped styled-component errors "has no properties in common with"
"styled-components": "4.0.3",
"@types/styled-components": "4.0.3",
"babel-plugin-styled-components": "^1.10.0",
Full package.json
{
"name": "",
"version": "2.0.0",
"main": "index.js",
"scripts": {
"dev": "next -p 7777",
"build": "next build",
"start": "next start -p 8000",
"test": "NODE_ENV=test jest --watch --no-cache",
"test-win": "SET NODE_ENV=test&& jest --watch"
},
"license": "ISC",
"dependencies": {
"@zeit/next-sass": "^1.0.1",
"@zeit/next-typescript": "^1.1.1",
"axios": "^0.18.0",
"decko": "^1.2.0",
"downshift": "^2.2.3",
"enzyme": "^3.6.0",
"enzyme-adapter-react-16": "^1.5.0",
"graphql": "^14.0.2",
"graphql-tag": "^2.9.2",
"graphql-tools": "^4.0.0",
"lodash.debounce": "^4.0.8",
"next": "^7.0.2",
"next-routes": "^1.4.2",
"node-sass": "^4.11.0",
"nprogress": "^0.2.0",
"prop-types": "^15.6.2",
"ramda": "^0.26.1",
"react": "^16.7.0",
"react-adopt": "^0.6.0",
"react-dom": "^16.7.0",
"react-redux": "^6.0.0",
"react-transition-group": "^2.5.0",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"styled-components": "4.0.3",
"tslint": "^5.12.1",
"tslint-react": "^3.6.0",
"typescript": "^3.2.4",
"waait": "^1.0.2"
},
"devDependencies": {
"@babel/plugin-proposal-decorators": "^7.3.0",
"@babel/preset-typescript": "^7.1.0",
"@types/enzyme": "^3.1.15",
"@types/jest": "^23.3.13",
"@types/next": "^7.0.6",
"@types/ramda": "^0.25.49",
"@types/react": "^16.7.20",
"@types/react-dom": "^16.0.11",
"@types/react-redux": "^7.0.1",
"@types/styled-components": "4.0.3",
"@types/zeit__next-typescript": "^0.1.1",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^24.1.0",
"babel-plugin-sass-vars": "^0.2.1",
"babel-plugin-styled-components": "^1.10.0",
"casual": "^1.5.19",
"enzyme-to-json": "^3.3.4",
"jest": "^24.1.0"
},
"jest": {
"setupTestFrameworkScriptFile": "<rootDir>/jest.setup.js",
"testPathIgnorePatterns": [
"<rootDir>/.next/",
"<rootDir>/node_modules/"
],
"transform": {
".*": "babel-jest",
"^.+\\.js?$": "babel-jest",
"^.+\\.ts?$": "babel-jest",
"^.+\\.tsx?$": "babel-jest"
},
"moduleFileExtensions": [
"js",
"json",
"ts",
"tsx"
],
"modulePaths": [
"<rootDir>/components/",
"<rootDir>/pages/",
"<rootDir>/shared/"
]
}
}
Ok like it was stated above just to clarify if you create a component
<DeliverNow>
</DeliverNow>
it automatically passes props to it and if when u declare it
const DeliverNow = () => {}
Typescript would tell you that they don't match cuz, in reality, DeliverNow takes in some props
so in actual sense, its meant to be
const DeliverNow = (props:any) => {}
<Note>{props.message}</Note>
is same as Note({ children: props.message })
so typescript is complaining that function Note
doesn't take any arguments and function type doesn't match. It has nothing to do with styled-components.
( IntrinsicAttributes
is probably the default interface you extend when you write a functional component. Or something like that idk xD)
My best guess is you want const Note = props.error ? NotificationError : NotificationSuccess;
const Note = props.error ? NotificationError : NotificationSuccess;
instead of what you have written.
PS. I might be wrong but I'm mostly sure this is the case.
This was the fix for me. I was trying to name my own component the same name as a dependency component and VS Code automatically imported from the dependency instead of my component.
I got this error:
Type '{ children: string; }' has no properties in common with type 'IntrinsicAttributes'.ts
When dynamically added tags in my react application. I found a great solution that has nothing to do with typescript or styled-components.
It is enough to create a node through React.createElement
For example:
const Title: React.SFC<TitleProps> = ({ tag, styled, children }) =>
React.createElement(tag, { ...styled }, children);
const TitleStyled = styled(Title)`Your styled`
Most common case to get that error is when you name your styled-component the same name as function component. Just give some postfix to your style components like ButtonStyled
or ButtonContainer
and you are g2g
As you can read on the Component documentation:
/**
* A general `Component` has no implicit `children` prop. If desired, you can
* specify one as in `Component<{name: String, children: JSX.Element>}`.
*/
export declare type Component<P = {}> = (props: P) => JSX.Element;
So, in order to get rid of this warn, you must pass a generic that includes the children or whatever props you want. The correct implementation is:
export const Notification: Component<IProps> = (props) => {
const Note = () => props.error ? NotificationError : NotificationSuccess;
// Error happens on <Note>
return (<Note>{props.message}</Note>);
}
You wont need to declare the props type, since it is intrinsic to the Component<P>
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.