如何将aria属性添加到样式化组件？

Question

我正在使用styled-components npm包，需要将aria-haspopup属性添加到我的扩展Button组件中。我尝试过以下操作，但这不会添加属性：

import Button from './button';

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

Answer 1

我发现解决方案是：

新样式组件v4语法：

import Button from './button';

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

旧语法：

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

解决方案是：

import Button from './button';

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