I am trying to create a button component using styled components that takes a prop as which can be a ComponentType | string When I try another prop called skin or size I get the error No overload matches this call. I have googled what I can think of under the sun. I have tried everything I could. I initially didn't use the attrs in styled components but after googling for hours I think I need to use it but not sure. What am I missing?
Here is the Button component:
const Button: FunctionComponent<FullProps> = ({
as,
children,
skin = "primary",
size = "medium",
...props,
}) => {
return (
<Component
as={as}
size={size}
skin={skin}
{...props}
>
{children}
</Component>
);
};
Here is the type FullProps which has all of the props but I'm trying reduce it to the smallest issue:
export type FullProps = {
as?: ComponentType | string;
isFullWidth?: boolean;
disabled?: boolean;
shadow?: ShadowStep;
size?: Size;
skin?: Skin;
theme?: Theme;
type?: HtmlButtonType;
href?: string;
onClick?: () => void;
children?: ReactNode;
id?: string;
loadingConfig?: LoadingConfig;
icon?: IconConfig;
};
I know when using styled components you should use the prop forwardedAs to pass a as value down. That part works if I just have a simple component that takes as:
const DemoALink = styled(Button)`
color: white;
background: #fb6058;
height: 4rem;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
`;
Here is the styled component being used:
<DemoALink forwardedAs="a" skin="primary">
Testings
</DemoALink>
And this is the styling for the component:
export const Button = styled.button.attrs<FullProps>(
({ disabled, as, type }: FullProps) => ({
type: as === "button" && type ? type : undefined,
disabled,
})
// )<Required<FullProps> & { children: ReactNode }>`
)<Required<FullProps> & { children: ReactNode }>`
${baseStyles};
${({ skin, theme }) => getVariant({ skin, theme })}
padding-top: ${getHeight};
padding-bottom: ${getHeight};
box-shadow: ${shadow};
width: ${({ isFullWidth }: { isFullWidth: boolean }) =>
isFullWidth ? "100%" : "auto"};
`;
I recently ran into this same error while trying to use typescript in styled components. I eventually resolved it and found out the reason I was having that error. I'll sight an example for context.
imagine declaring a type for an avatar component like so:
interface Avatar {
src?: string,
alt: string,
height: string,
width: string,
}
It would be safe to make use of this type declaration in the desired component like so:
const AvatarContainer: FC<Avatar> = ({src, alt, width, height}) => {
return (
<Container width={width} height={height}>
<img src={src} alt={alt} />
</Container>
)
};
export default AvatarContainer;
const Container = styled.div<{width: string, height: string}>`
width: ${(props) => props.width || '35px'};
height: ${(props) => props.height || '35px'};
overflow: hidden;
border-radius: 50%;
`;
Note that the above will work correctly without erroring out. However, to reproduce the
no overload matches this call
error, let's modify the above jsx to:
const AvatarContainer: FC<Avatar> = ({src, alt, width, height}) => {
return (
<Container width={width} height={height}>
<img src={src} alt={alt} />
</Container>
)
};
export default AvatarContainer;
const Container = styled.div<Avatar>`
width: ${(props) => props.width || '35px'};
height: ${(props) => props.height || '35px'};
overflow: hidden;
border-radius: 50%;
`;
The above will error out. This is because the type definition 'Avatar' contains two more props, src and alt that our Container component does not need. What we want to do instead, is specify explicitly the props that our Container component needs as outlined in our first code example.
I hope this was helpful.
Here is how I resolved a No overload matches this call error in my styled-component:
interface Props{
someProp: string
}
const SomeStyledComponent = styled.div<{ someProp: string}>`
some-css-property: ${(props) => props.someProp}
`
export default function SomeCompnent({ someProp }: Props): ReactElement{
return(
<SomeStyledComponent someProp={someProp} />
)
}
Related
In my component, I receive props of styles, like this:
export const NavBox = styled.div<{ open: boolean }>`
display: flex;
height: 100%;
justify-content: flex-end;
align-items: center;
#media (max-width: 768px) {
flex-direction: column;
position: fixed;
width: 100%;
justify-content: flex-start;
background-color: var(--color);
transition: all 0.3s ease-in;
top: 10.3vh;
padding-top: 10vh;
left: ${(props) => (props.open ? '-100%' : '0')};
}
`
And in Header, I receive this error about types:
Property 'navbarOpen' does not exist on type 'IntrinsicAttributes & Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; },
Property 'open' is missing in type '{ children: Element; }' but required in type 'Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, "key" | keyof HTMLAttributes> & { ...; } & { ...; }, never> & Partial<...>, "theme">'.
This is the code:
const Header = () => {
const [navbarOpen, setNavbarOpen] = React.useState<boolean>(false)
return (
<S.HeaderWrapper>
<S.NavWrapper>
<S.Toggle
navbarOpen={navbarOpen}
onClick={() => setNavbarOpen(!navbarOpen)}
>
{navbarOpen ? <S.Hamburger open /> : <S.Hamburger />}
</S.Toggle>
{navbarOpen ? (
<S.NavBox>
<NavBar />
</S.NavBox>
) : (
<S.NavBox open>
<NavBar />
</S.NavBox>
)}
</S.NavWrapper>
</S.HeaderWrapper>
)
}
Anyone can help me with this problem? Thanks for any help!
You defined type for "NavBox" with required property with name "open", but not passed it. You need make it non-required or pass it always.
I don't see types for "Toggle" and "Hamburger". But they is highlighted. Check their. Check property names in type and need their property always or sometimes.
If you need property always:
interface Some {
isOpen: boolean;
}
If you need property sometimes:
interface Some {
isOpen?: boolean;
}
Below, i highlight problem places
const Header = () => {
const [navbarOpen, setNavbarOpen] = React.useState<boolean>(false)
return (
<S.HeaderWrapper>
<S.NavWrapper>
<S.Toggle
navbarOpen={navbarOpen} // Check navbarOpen property in "Toggle" type
onClick={() => setNavbarOpen(!navbarOpen)}
>
{navbarOpen ? <S.Hamburger open /> : <S.Hamburger />} // Check required or non-required "open" property in "Hamburger" component
</S.Toggle>
{navbarOpen ? (
<S.NavBox> // You set "open" as required property, you need pass "open" property.
<NavBar />
</S.NavBox>
) : (
<S.NavBox open>
<NavBar />
</S.NavBox>
)}
</S.NavWrapper>
</S.HeaderWrapper>
)
}
I made a little refactoring. In example below. "Open" property is required, pass it always. And renamed prop for "Toggle" component.
const Header: React.FC = () => {
const [navbarOpen, setNavbarOpen] = useState<boolean>(false)
const handleClick = useCallback(() => {
setNavbarOpen(!navbarOpen)
}, [navbarOpen])
return (
<S.HeaderWrapper>
<S.NavWrapper>
<S.Toggle open={navbarOpen} onClick={handleClick}>
<S.Hamburger open={navbarOpen} />
</S.Toggle>
<S.NavBox open={navbarOpen} >
<NavBar />
</S.NavBox>
</S.NavWrapper>
</S.HeaderWrapper>
)
}
I need to create a React Component Library
For this i use React with Typescript and styled-components.
I got stuck when i try to reuse my Atoms in a Molecule...
I create my Button Atom Component like this:
interface IButtonProps {
text?: string
onClick?: React.MouseEventHandler<HTMLButtonElement>
}
const StyledButton = styled.button<IButtonProps>`
height: 70px;
width: 70px;
border: none;
border-radius: 5px;
background-color: #88BDBC;
color: #254E58;
font-family: Alata, sans-serif;
font-size: 35px;
transition: all 350ms;
&:hover {
background-color: #254E58;
color: #88BDBC;
}
&:active {
background-color: #112D32;
color: #88BDBC;
}
`;
const Button = ({
text = "",
onClick
}: IButtonProps): React.ReactElement => {
return (
<StyledButton onClick={onClick}>{text}</StyledButton>
);
};
This is only a really not perfect Example for my Atoms. I create all Atoms like this. I only define the Style inside the Atoms -> Colors, Borders, Margins and so on. Not the Styles outside -> For Example Padding then i think its depends much in which context this Button is used.
So I'm very encapsulated.
When i want to use the Button in the for example 'Controller' Molecule then i need to give that Button some Positions and maybe some Paddings etc.
But in my Parent Styled Component i doesn't now how to Point them correctly. Especially when i have some bigger mix of Components like here.
interface IControllerProps {
text1: string;
text2: string;
text3: string;
onClick?: React.MouseEventHandler<HTMLButtonElement>
}
const StyledController = styled.div<IControllerProps>`
/* ... */
`;
const Controller = ({
onClick
}: IControllerProps) => {
const [powerOn, setPowerOn] = React.useState(false);
const [bankType, setBankType] = React.useState(false);
const [volume, setVolume] = React.useState(50);
return (
<StyledController>
<Text text="Hello"/>
<Switch checked={powerOn} onChange={(e: React.ChangeEvent<HTMLInputElement>) => {setPowerOn(e.target.checked)}}/>
<Button onClick={() => false}/>
<Text text="Hello"/>
<RangeSlider value={volume} min={0} max={100} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setVolume(parseInt(e.target.value))} />
<Text text="Hello"/>
<Switch checked={bankType} onChange={(e: React.ChangeEvent<HTMLInputElement>) => {setBankType(e.target.checked)}}/>
<Button onClick={onClick}/>
<Button onClick={onClick}/>
</StyledController>
)
};
Do i need to work with Propertys to give that to the Button ... Point everything with pseudoclasses ... Define everything in the Button (But what is with flexibility to Context of the reusable Button) ...
What is the best practice for that?
You target the styles like so (I answer in javascript for less complexity):
// Button.react.js
export const StyledButton = styled.button`
background-color: #88bdbc;
`;
// Controller.react.js
import { StyledButton } from './Button.react.js';
const StyledController = styled.div`
${StyledButton} {
background-color: blue;
}
`;
Please check the related docs.
In additon of the Answer from Dennis Vash:
For my Example Button Component this means i need to change it like this:
interface IButtonProps {
text?: string
onClick?: React.MouseEventHandler<HTMLButtonElement>
className?: string
}
const UnstyledButton = ({
text = "",
onClick,
className
}: IButtonProps): React.ReactElement => {
return (
<button onClick={onClick} className={className}>{text}</button>
);
};
const Button = styled(UnstyledButton)<IButtonProps>`
height: 70px;
width: 70px;
border: none;
border-radius: 5px;
background-color: #88BDBC;
color: #254E58;
font-family: Alata, sans-serif;
font-size: 35px;
transition: all 350ms;
&:hover {
background-color: #254E58;
color: #88BDBC;
}
&:active {
background-color: #112D32;
color: #88BDBC;
}
`;
The Reason for that is: This only works in the Context of styled-components and not on Context of ReactElement.
Important Point from styled-component docs:
However, wrapping in a styled() factory makes it eligible for interpolation -- just make sure the wrapped component passes along className.
When u use the Button directly from Styled Component (like Dannis Vash mentioned) then u can refer to it directly.
I have the following svg component where I am passing props.
import React from 'react';
export default (props) => (
<svg {...props}>
<path
d="M11.5 16.45l6.364-6.364"
fillRule="evenodd"
/>
</svg>
);
I then have a styled-component that looks like this.
const Icon = styled(_Icon)`
${props =>
props.isActive &&
css`
transform: rotate(-180deg);
`};
`;
I am seeing the following react error.
Warning: React does not recognize the isActive prop on a DOM element.
I ran into the same issue with styled-components and I ended up doing something like this:
<Icon isactive={isActive.toString()} />
${props =>
props.isactive === 'true' &&
css`
transform: rotate(-180deg);
`};
}
const StyledIcon = styled(({ isActive, ...props }) => <Icon {...props} />)`
${props =>
props.isActive &&
css`
transform: rotate(-180deg);
`};
`
Is the much less hacky solution that also prevents the property from being unnecessarily rendered to the DOM
I had a similar issue and fixed the error by passing the props into a Styled Component instead of a normal html element. For you, you would change the svg element to something like this:
import React from 'react';
export default (props) => (
<SvgStyledComp {...props}>
<path d="M11.5 16.45l6.364-6.364" fillRule="evenodd"/>
</SvgStyledComp>
);
const SvgStyledComp = styled.svg`
${props => props.isActive && css`
transform: rotate(-180deg);
`};
`;
You can use transient-props.
here is tsx example :
Button is antd Button
import { Button } from 'antd';
import styled from 'styled-components';
interface IMyButtonProps {
$switchShape: boolean;
$myColor: string;
$myBorderColor: string;
}
let MyButton = styled(Button).attrs<IMyButtonProps>((props) => {
// console.log(props);
let myShape = props.$switchShape ? 'circle' : 'round';
return { type: 'primary', shape: myShape };
})<IMyButtonProps>`
margin-left: 10px;
${{
padding: '100px',
}}
${(props) => {
// You can get the result of Attrs
// console.log(props);
return `
color:${props.$myColor}
`;
}};
${(props) => {
// CSSProperties
return {
borderColor: props.$myBorderColor,
};
}};
`;
ghost is antd Button attr
<MyButton ghost={true} $switchShape $myBorderColor='black' $myColor='red'>
click me
</MyButton>
Simple way to fix this error is change props name to '$ + props_name'
Example:
interface MenuItemProps extends TypographyProps {
$isActive?: boolean;
}
I just read in the styled-components documentation that the following is wrong and it will affect render times. If that is the case, how can I refactor the code and use the required props to create a dynamic style?
Thank you in advance.
Tab component
import React from 'react'
import styled from 'styled-components'
const Tab = ({ onClick, isSelected, children }) => {
const TabWrapper = styled.li`
display: flex;
align-items: center;
justify-content: center;
padding: 100px;
margin: 1px;
font-size: 3em;
color: ${props => (isSelected ? `white` : `black`)};
background-color: ${props => (isSelected ? `black` : `#C4C4C4`)};
cursor: ${props => (isSelected ? 'default' : `pointer`)};
`
return <TabWrapper onClick={onClick}>{children}</TabWrapper>
}
export default Tab
I believe what the documentation is saying is that you should avoid including your styles inside of the rendering component:
DO THIS
const StyledWrapper = styled.div`
/* ... */
`
const Wrapper = ({ message }) => {
return <StyledWrapper>{message}</StyledWrapper>
}
INSTEAD OF THIS
const Wrapper = ({ message }) => {
// WARNING: THIS IS VERY VERY BAD AND SLOW, DO NOT DO THIS!!!
const StyledWrapper = styled.div`
/* ... */
`
return <StyledWrapper>{message}</StyledWrapper>
}
Because what happens is when the component's Props changes, then the component will re-render and the style will regenerate. Therefore it makes sense to keep it separate.
So if you read further on to the Adapting based on props section, they explain this:
const Button = styled.button`
/* Adapt the colours based on primary prop */
background: ${props => props.primary ? "palevioletred" : "white"};
color: ${props => props.primary ? "white" : "palevioletred"};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
// class X extends React.Component {
// ...
render(
<div>
<Button>Normal</Button>
<Button primary>Primary</Button>
</div>
);
// }
this works because when you use the Button component in class X, it will know the props of class X without you having to tell it anything.
For your scenario, I imagine the solution would be simply:
const TabWrapper = styled.li`
display: flex;
align-items: center;
justify-content: center;
padding: 100px;
margin: 1px;
font-size: 3em;
color: ${props => (props.isSelected ? `white` : `black`)};
background-color: ${props => (props.isSelected ? `black` : `#C4C4C4`)};
cursor: ${props => (props.isSelected ? 'default' : `pointer`)};
`;
const Tab = ({ onClick, isSelected, children }) => {
return <TabWrapper onClick={onClick}>{children}</TabWrapper>
}
const X = <Tab onClick={() => console.log('clicked')} isSelected>Some Children</Tab>
I haven't tested this at all, so please feel free to try it out and let me know if it works for you or whatever worked for you!
You can pass an argument with Typescript as follows:
<StyledPaper open={open} />
...
const StyledPaper = styled(Paper)<{ open: boolean }>`
top: ${p => (p.open ? 0 : 100)}%;
`;
Another way to do it would be
const StyledDiv = styled.div.attrs((props: {color: string}) => props)`
width: 100%;
height: 100%;
background-color: ${(props) => props.color};
`
//...
render() {
return (
<StyledDiv color="black">content...</StyledDiv>
);
}
This way you are type-safe in terms of the props you want to send into the styled component. (Good when coding in Typescript)
For a more simple example with functional components:
Suppose you have an arrow like polygon and you need 2 of them pointing in different directions. So you can pass the rotate value by props
<Arrow rotates='none'/>
<Arrow rotates='180deg'/>
Then in the Component Arrow you have to pass the props like normal component to the styled component but in the styled component you have to use it like props:
import React from 'react';
import styled from "#emotion/styled";
const ArrowStyled = styled.div`
background-color: rgba(255,255,255,0.9);
width: 24px;
height: 30px;
clip-path: polygon(56% 40%,40% 50%,55% 63%,55% 93%,0% 50%,56% 9%);
transform: rotate(${props => props.rotates});
`
const Arrow = ({rotates}) => {
return (
<ArrowStyled rotates={rotates}/>
);
}
export default Arrow;
If you're using Typescript create an interface inside your styles file!
Otherwise, you won't be able to access props in your CSS
import styled from 'styled-components'
interface StyledLiProps{
selected: boolean
}
export const TabWrapper = styled.li`
// styles ...
color: ${props => (selected ? `white` : `black`)};
background-color: ${props => (selected ? `black` : `#C4C4C4`)};
`
And don`t forget to declare the props you want to use in your CSS inside your JSX
interface TabProps{
text: string;
}
const Tab = ({ text }: TabProps) => {
//...
return <TabWrapper selected={isSelected} onClick={() => updateTab}>{text}</TabWrapper>
}
Consider styled components documentation gives example of using reacts context api [2] for different themes.
[1] https://www.styled-components.com/docs/advanced
[2] https://reactjs.org/docs/context.html
Exporting styled-component
Button
and passing scrollPosition as a prop in functional component
PassingPropsToSyledComponent
import styledComponents from "styled-components";
export const Button = styledComponents.div`
position: ${ props => props.scrollPosition ? 'relative' : 'static' };
`;
export const PassingPropsToSyledComponent = ()=> {
return(
<Button scrollPosition={scrollPosition}>
Your Text Here
</Button>
)
}
I am passing props from one stateless function to another, and I get a reference error saying the prop is undefined. Here is the parent function:
const Home = () => {
return (
<App>
<BackgroundImage url="mercedes-car.jpg">
<h1>Test</h1>
</BackgroundImage>
</App>
)
}
And here is the BackgroundImage function:
const Image = styled.div`
background-image: ${props => url(props.imageUrl)};
background-size: cover;
height: 100%;
width: 100%;
`;
const BackgroundImage = (props) => {
console.log(props)
return (
<Image imageUrl={ props.url }>
{ props.children }
</Image>
)
}
The error is that url is undefined; however, when I console.log(props), I get an object with url and children. Any direction or explanation as to why this error is throwing would be appreciated!
I'm guessing you meant
background-image: ${props => url(props.imageUrl)};
to be
background-image: url(${props => props.imageUrl});
since the result of that function needs to be a string. Otherwise you're trying to call a function called url.
you have a scope issue. change it to:
const BackgroundImage = (props) => {
console.log(props)
const Image = styled.div`
background-image: url(${props.url});
background-size: cover;
height: 100%;
width: 100%;
`;
return (
<Image>
{ props.children }
</Image>
)
}
basically the props are not available to your image, because styled.div is not a normal react component that has props.
Another way is to leave your code as is but set the background image from inside the return function:(and remove it from the styled.div)
return (
<Image style={{backgroundImage: `url(${props.url})`}}>
{ props.children }
</Image>
)
}