• 使用情感/风格v11*

背景
为了更改项目中所有按钮的默认值type，我为HTML <button>编写了一个 Package 器组件WrappedButton。为了使这个新的WrappedButton组件成为styled（styled(WrappedButton)({...})），我需要用styled Package 我的WrapperButton。
问题
尝试在WrappedButton上设置aria-label属性时，出现控制台错误Using kebab-case for css properties in objects is not supported. Did you mean ariaLabel?
当我将aria-label更改为ariaLabel时，没有出现错误，但标签没有设置。

问题

如何在保持用例完整的同时消 debugging 误？

代码

换行按钮

type ButtonPropsType = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
type RefType = ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;

/** 
  * This is needed in order to allow the button to be styled by
  * emotion (`styled(WrappedButton)({...})`
 **/
const StylableButton = styled.button({}, (props: ButtonPropsType) => ({
    ...(props as any),
}));

// change default `type` from `submit` to `button`
const defaultProps: ButtonPropsType = {
    type: 'button',
};

export const WrappedButton = forwardRef((props: ButtonPropsType, ref: RefType) => {
    return <StylableButton {...defaultProps} ref={ref} {...props} />;
});
WrappedButton.displayName = 'Button';

用法

test('A', () => {
    render(<WrappedButton aria-label='foo'>a</WrappedButton>);
});

我的尝试：

• 应向前推进 *

const StylableButton = styled('button',
  {
  //shouldForwardProp: (prop) => (prop !== 'aria-label')
  }
)({}, (props: ButtonPropsType) => ({
    shouldForwardProp: (prop) => (prop !== 'aria-label'),
    ...(props as any),
}));