Change type signature of the SimpleLink component

Change type signature from:

const BaseSimpleLink = styled<"a" | "button">("button", {
  shouldForwardProp: prop => !["color_", "left_", "right_"].includes(prop),
 })

To:

const BaseSimpleLink = (styled<"a" | "button">).button``

The .button syntax automatically filters props and make code much cleaner.

[stereobooster]

Let me help you here a bit. What I would do first is find the type definition. For example in IDE (in my case vscode) <kbd>cmd</kbd> + click on styled

export default styled as CreateStyled<OperationalStyleConstants>

<kbd>cmd</kbd> + click on CreateStyled

export interface CreateStyled<Theme extends object = any>
  extends BaseCreateStyled<Theme>,
    StyledTags<Theme> {}

<kbd>cmd</kbd> + click on CreateStyled

export interface CreateStyled<Theme extends object = any> {
  <Tag extends React.ComponentType<any>, ExtraProps = {}>(
    tag: Tag,
    options?: StyledOptions
  ): CreateStyledComponentExtrinsic<Tag, ExtraProps, Theme>

  <Tag extends keyof JSXInEl, ExtraProps = {}>(
    tag: Tag,
    options?: StyledOptions
  ): CreateStyledComponentIntrinsic<Tag, ExtraProps, Theme>
}

as you can see param type here is Tag (<Tag, ExtraProps>()).

Let’s see definition of styled.button:

export interface StyledTags<Theme extends object> {
  // ...
  button: CreateStyledComponentIntrinsic<'button', {}, Theme>

as you can see button comes with predefined “tag” type, so you can’t change it like this (styled<"a" | "button">).button.

[TejasQ]

Great! So shall we close this issue then?