Styled Components - two different elements with the same styles

Question

I have a Button component (in React) which can either be a button or an a element, depending on if a href prop is passed to the component. Something similar to below:

const Button = ({ children, href, onClick }) => {
    if(href) {
        return <a href={href} onClick={onClick}>{children}</a>;
    }

    return <button type="button" onClick={onClick}>{children}</button>;
};

I previously used Sass to style these components, but am now attempting to move over to styled-components. However, I have come across an issue where these two elements require the same styles, but the syntax of styled-components would require me to create to separate variables - styled.button and styled.a, with duplicated styles for each.

I was wondering if there was a way of dynamically changing the element used in styled-components, maybe based on props in the same way one can change individual CSS properties? I have attempted something along the lines of:

const StyledButton = styled((props) => props.href ? 'a' : 'button')`
    ...
`;

but no luck so far. Any advice would be greatly appreciated.

score 14 · Accepted Answer · answered Apr 30 '20 at 08:55

14

Create generic styles that you can reuse

You can extract and pass styles as string args to a styled component.

const buttonStyles = `
color: red;
...
`

const StyledA = styled.a(buttonStyles);
const StyledButton = styled.button(buttonStyles);

If you need some exceptions

import styled, { css } from ‘styled-components’;

const baseInputStyles = css`
  padding: 0.5em;
`;

const StyledA = styled.a`
  ${baseInputStyles}
`;

const StyledButton = styled.button`
  ${baseInputStyles}
  /* make changes as needed*/
`;

answered Apr 30 '20 at 08:55

Joe Lloyd

19,471
7
53
81

1

How can u get props in the mass style block? – Mote Zart Jun 23 '21 at 20:10
@MoteZart https://stackoverflow.com/a/49622151/2590119 has the solution – Caleb Jay Sep 01 '21 at 13:33

score 0 · Answer 2 · answered Aug 20 '21 at 18:26

I tried Joe Lloyd's answer but it didn't work because the function styled.xxx() takes one parameter of type templateStringsArray instead of template String:

const buttonStyles = [
`
color: red;
...
`
]

const StyledA = styled.a(buttonStyles);
const StyledButton = styled.button(buttonStyles);

Styled Components - two different elements with the same styles

2 Answers2

Create generic styles that you can reuse

If you need some exceptions