We Keep Coding

How to extend styling of component without using wrapper element?

I'm working with styled-components in atomic system.
I have my <Atom title={title} onClick={onClick}/>
And I have molecule that extends that atom, by just adding some functionality to it without wrapping element:
const Molecule = ({}) => {
const [title, setTitle] = useState('Base title')
const onClick = () => {
// some actions
}
useEffect(()=>{
setTitle('New title')
},[conditions changed])
return(
<Atom title={title} onClick={onClick}/>
)
}
I have base styling in <Atom/> but I would like to add some more to it in <Molecule/>. Is it possible to do it without creating extra wrapper?

It is possible, but the question is if it's worthy the effort - the most anticipated way would be to do it as the documentation says - to wrap the styled component and extend the styles (but this is what you want to avoid). So either:
you could assign a className to Atom, so you can adjust/overwrite the styles with CSS
pass the extraStyles props to Atom and then pass to the styled component and just use inside after the previous, default styles to overwrite them
or either pass some extraStyles as CSSProperties object and just use them as inline styling.
https://codesandbox.io/s/withered-leftpad-znip6b?file=/src/App.js:64-545
/* styles.css */
.extraClass {
color: green;
}
const AtomStyled = styled.div`
font-size: 17px;
color: blue;
font-weight: 600;
`;
const Atom = ({ children, className, extraStyles }) => {
return (
<AtomStyled style={extraStyles} className={className}>
{children}
</AtomStyled>
);
};
const Molecule = () => {
return (
<Atom className={'extraClass'} extraStyles={{ fontSize: 27 }}>
Atom
</Atom>
);
};

No overload matches this call with styled components

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} />
)
}

Using Styled Components within a NPM Module

I am unsure if this is a me issue or the libary or just not possible in general (although it should).
What I am trying to do is the following:
I have used Material UI to create a "Libary" that I can reuse in all my projects so I do not have to do all the things every time that I usually do. I have used styled components to style some of the material ui components such as Button and TextField. I have exposed some of those modified properties to the app that consumes my libary. When these styles that are exposed are generic everything works fine.
As an example here is my modified Button with just basic styles:
const StyledButton = styled(Button)`
width: ${props => props.width || "265px"};
height: ${props => props.height || "40px"};
margin: ${props => props.margin} !important;
padding: ${props => props.padding};
font-weight: ${props => props.fontWeight || "700"};
text-decoration: ${props => props.textDecoration};
`
This button then is used in the libaries Button component thus masking the material ui part of it like so:
const MyButton = (props) => {
return (<StyledButton width={props.width} height={props.height} .../>)
}
And so forth. This is working. My issue arrises when I am trying to make the button change on some mobile breakpoint.
This is my full button component here:
const StyledButton = styled(Button)`
width: ${props => props.width || "265px"};
height: ${props => props.height || "40px"};
margin: ${props => props.margin} !important;
padding: ${props => props.padding};
font-weight: ${props => props.fontWeight || "700"};
text-decoration: ${props => props.textDecoration};
#media only screen and (max-width: ${MOBILE_BREAKPOINT}) {
width: ${props => props.mWidth || "165px"};
height: ${props => props.mHeight || "40px"};
margin: ${props => props.mMargin};
padding: ${props => props.mPadding};
font-weight: ${props => props.mFontWeight};
text-decoration: ${props => props.mTextDecoration};
}
`;
However when I am trying to now set these values I get errors in the console from React (as expected) that are not hindering the execution of my code. But still nothing is happening when I decrease screen width below 450px (MOBILE_BREAKPOINT).
The way I am trying to do it is by deconstructing the props js const {mWidth, mHeight} = mobile;
The values show up in the props of the component but they are not used. I am passing them like this:
<MyButton width={"75%"} height={"40px"} mobile={{mWidth: "95%}}/>
It just does not do what I want it to when the breakpoint is passed. The width stays at 75%. 95% is never activated.
Can anyone tell me what I am doing wrong or if this is impossible to achieve?
I appreaciate the help!

You can simply write your MyButton code like this:
const MyButton = (props) => {
const { width, height, mobile: {mWidth, mHeight}} = props;
return (
<StyledButton
width={width}
height={height}
mWidth={mWidth}
mHeight={mHeight}
/>
);
}
And then your media query worked fine.
I recommend you to set default value in destructuring part in the MyButton instead of in the StyledButton, in order to do that you can change MyButton component like this:
const MyButton = (props) => {
const {
width = "265px",
height = "40px",
mobile: {mWidth = "165px", mHeight = "40px"}
} = props;
return (
<StyledButton
width={width}
height={height}
mWidth={mWidth}
mHeight={mHeight}
/>
);
}
and then StyledButton should change like this:
const StyledButton = styled(Button)`
width: ${props => props.width};
height: ${props => props.height};
#media only screen and (max-width: ${MOBILE_BREAKPOINT}) {
width: ${props => props.mWidth};
height: ${props => props.mHeight};
}
`;
and you also can refactor StyledButton like below:
const StyledButton = styled(Button)`
width: ${({ width }) => width};
height: ${({ height }) => height};
#media only screen and (max-width: ${MOBILE_BREAKPOINT}) {
width: ${({ mWidth })=> mWidth};
height: ${({ mHeight })=> mHeight};
}
`;

React — Passing props with styled-components

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>
)
}

How to get access to CSS values from a styled component (React)?

I want to access the CSS values I assigned to a styled component in a function. How would I do so?
For example:
const Hello = styled.p `
font-size: 10px;
`;
getFontSize = () => {
}
I want to log the font size of the component Hello in the function getFontSize(). I have tried using refs and InnerRefs but no luck.

You can use the innerRef prop on your component to get a reference to the DOM node, and then use window.getComputedStyle on the node to get the font-size.
Example
const Hello = styled.input`
padding: 0.5em;
margin: 0.5em;
color: palevioletred;
background: papayawhip;
border: none;
border-radius: 3px;
font-size: 10px;
`;
class Form extends React.Component {
ref = null;
componentDidMount() {
this.getFontSize();
}
getFontSize = () => {
console.log(
window.getComputedStyle(this.ref, null).getPropertyValue("font-size")
);
};
render() {
return <Hello innerRef={ref => (this.ref = ref)} />;
}
}