How to add an aria attribute to a styled component?

Question

I am using the styled-components npm package and need to add the aria-haspopup attribute to my extended Button component. I have tried the following, but this doesn't add the attribute:

import Button from './button';

const StyledBtn = Button.attrs({
    'aria-haspopup': 'true',
}).extend``;

Answer 1

I found that the solution was:

New styled-components v4 syntax:

import Button from './button';

const StyledBtn = styled(Button).attrs({
    'aria-haspopup': 'true',
})``;

Old syntax:

import Button from './button';

const StyledBtn = Button.extend.attrs({
    'aria-haspopup': 'true',
})``;

https://www.styled-components.com/docs/api

https://medium.com/styled-components/styled-components-v4-new-final-finalest-for-real-final-final-psd-fa4d83398a77

Answer 2

The solution is:

import Button from './button';

const StyledBtn = Button.attrs(({ value }) => ({
  ariaHaspopup: value,
}));