Anyone using Remix? Having trouble trying to set an as prop on a Link

[delicious_hare]

Anyone here using remix? I’m having trouble trying to set an as prop to be a Link component from remix. I have an outlet that points to a Button component (the one built in). When I set as on the component, it gives me a typescript error and also crashes on remix. My work around right now is to wrap it, unfortunately if I set a link value in the editor, it becomes an a element, and then I end up wrapping an a in another a , which isn’t technically valid.

Remix is pretty new, so I doubt there is a large audience here. But, I wonder if there is something similar with just using react-router, if anyone else as run into this? Or maybe even a nextjs Link?

[delicious_hare]

I figured it out, to belongs on props. Documented here for the next person that searches. Its working now, unfortunately it completely messes up the look of the component, but at least I’ve made some progress.

[delicious_hare]

Question for the plasmic team. Is there a way to do this, sending in an as while still retaining the css?

When I don’t send in as: Link, my css looks like this

[delicious_hare]

When I send in the as, I lose all the plasmic classes

[zonal_mammal]

Hi Dusty,
To resolve the classname issue, there is an alternative way to render the link, it’s through the render prop as follow

dashboardLink={{
  render: ({children, className, ...restProps}) => <Link className={className} {...restProps} to="/">{children}</Link>;
}}

[delicious_hare]

tests.md

[delicious_hare]

Thanks @zonal_mammal. Unfortunately, that looks like it just overrides the component entirely. I just ran a test, here is what I see

[delicious_hare]

The wrap is closes to what I want, but I’m still stuck with an a element wrapping an a element. My workaround right now is to not add a link in the studio version, which then renders that Button component as a button

[delicious_hare]

In that case it works. The only downside is if our designers actually provide a link in there. Here is what it looks like in that setup

<a style="display:contents" href="/dashboard"
  ><button
    class="plasmic_default__all plasmic_default__button root_reset_mmXZA2WBheDYHSXdXWA4br plasmic_default_styles plasmic_mixins Button__root___6BIp7 Button__rootcolor_clear___6BIp7EmAFt __wab_instance NavPage__dashboard__yViZd"
  >
    <div class="__wab_flex-container">
      <div
        class="plasmic_default__all plasmic_default__div Button__contentContainer__fMnBn"
      >
        <div
          class="__wab_slot Button__slotTargetChildren__gyc46 Button__slotTargetChildrencolor_clear__gyc46EmAFt"
        >
          <div class="__wab_slot-string-wrapper">Dashboard</div>
        </div>
      </div>
    </div>
  </button></a
>

[zonal_mammal]

As per the shared output, using as: Link and render approach produces the same result. Which IMO is the expected behavior.

Can you please share the elements hierarchy for both NavPage and the DashboardLink component. It might helps in identifying whether it’s possible to override the parent anchor tag directly or not.

[yang]

Hi @delicious_hare, I tried to make a minimal example reproducing how to get Link working in the way you have laid out:

https://github.com/plasmicapp/remix-plasmic-demo

First, does the above repo work for you?

Also, just wanted to confirm that the Link you’re using is the one from remix-router (which forwards className etc. correctly)? Bizarre that the className is getting forwarded…do you happen to have a shareable example repo reproducing this?

[delicious_hare]

@yang thanks for taking a look. Here is a repro. https://stackblitz.com/github/dusty/rest-plasmic-remix?file=app%2Fcomponents%2FHomepage.tsx

[delicious_hare]

When it first loads is what I see with the as prop, if you click the logo, its what I want to see.

[delicious_hare]

[delicious_hare]

My intention is to use Link from @remix-run/react https://remix.run/docs/en/v1/api/remix#link

[yang]

Oh I see what’s going on

[yang]

In this case, you’re overriding Button instances, not normal a elements.

The Button component comes with its own set of styles, defined within the Button component (no styles are applied to the Button instance).

So when you say as: Link, it no longer renders a Button (along with its styles), and renders a plain Link.

If you instead applied as: Link to a styled a tag (or any other styled element), you should see those styles continue to get passed into the Link as className.

But actually - a better thing to do in this case is you could globally wrap all your Buttons inside a Link using component substitution.

[yang]

There’s more info here:

https://docs.plasmic.app/learn/code-component-substitution/#scheme=codegen

But essentially, I think you should be able to change your Button.tsx to something like this (this probably isn’t quite right but something like this, will need to look it up later):

function Button_(props: ButtonProps, ref: ButtonRef) {
  const { plasmicProps } = PlasmicButton.useBehavior<ButtonProps>(props, ref);
  return <PlasmicButton {...plasmicProps} root={{as:Link}} />;
}

[yang]

Yeah I think that’s right, just render:

  return (
    <PlasmicButton
      {...plasmicProps}
      root={{ as: Link, props: { to: props.link } }}
    />
  );

[delicious_hare]

I see, it is replacing the component entirely when you use as prop. I’ve been using Chakra which still passes through the styles on an as prop, so my expectations were off.