Inheritance of Styles between different elements

[xypnox]

It is common to have a button that submits a form and a link that navigates to a different page have same or similar styles.

In these cases, the button would be a button element and link a a anchor tag. Which would have two definitions where the same set of styles are repeated.

Ex:

const Button = styled('button')`
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  color: #000;
  background: #eee;
`

const Link = styled('a')`
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  color: #000;
  background: #eee;

  text-decoration: none;
`

It becomes hard to manage such a codebase as for every similarly styled element the styles are repeated.

Is there a way to define styles such that they can be inherited inside each other? There are concepts such as Sass Mixins that help manage similar styles from one place and only inherit styles as needed.

One of the cool things could be:

const ButtonStyle = styled.mixin`
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  color: #000;
  background: #eee;
`
const Button = styled('button')`
  ${ButtonStyle};
`
const Link = styled('a')`
  ${ButtonStyle};

  text-decoration: none;
`

Currently it can be done via just using a ``` string literal for static styles, but adding props etc to the mixin would help a long way.