Double borders on a button component when rendered in browser

Issues
21

Hi, when I try that, it doesn’t seem to substitute. my states aren’t being passed

22

Screen Shot 2021-09-10 at 11.10.39 PM.png

23

Hmm what do you mean by your states?

24

when i pass the props down like backEnabled to the Hud component, it’s not being recognized

25

basically my Hud.tsx isn’t being used, it’s using plasmic’s Hud

26

hmm that’s surprising; from the render method of the Hud component, you don’t see any props being passed in?

27

right! i would have a console.log() statement in the Hud component not being printed at all in console.

28

none of the Hud.tsx is being used

29

Can you show the import path for your Hud component from the Login component?

30

import Hud from ‘…/components/Hud’

31

Screen Shot 2021-09-13 at 3.11.00 PM.png
Screen Shot 2021-09-13 at 3.11.00 PM.png1674×460 83.6 KB

32

Could you try this instead:

hub: {
  render: () => <Hub backEnabled={false} />
}
33

hi that works, but when i try on a different component, the layout is corrupted

34 
triviaPanel: {
  render: () => <TriviaPanel />
}
35

https://files.slack.com/files-pri/T0128PVP932-F02F07NFLU8/screen_shot_2021-09-13_at_4.45.22_pm.png?t=xoxe-1076811791104-2551263848564-2534382505927-c411ccff975768c52df1cadf48fcd5b9(image larger than 4096KB)

36

basically loses its position values

Screen Shot 2021-09-13 at 4.46.12 PM.png
Screen Shot 2021-09-13 at 4.46.12 PM.png2410×1464 233 KB

37

it works with the Hud component because the position values aren’t sent aways (it’s always overlaid on the entire UI)

38

ah can you try it this way instead:

triviaPanel: {
  render: (ps) => <TriviaPanel {...ps} />
}

This just passes the props onto TriviaPanel (which includes className, which points to css rules that position the instance)

For Hub, you would just do…

hub: {
  render: (ps) => <Hub {...ps} backEnabled={false} />
}
39

ah got it. thanks this works!

40

actually i spoke too soon, it seems to not work