score:9

Accepted answer

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*/
`;

score:0

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

Related Query

More Query from same tag