SolidJS•2y ago

Add props to an element programmatically

In one of my components, I pass an element as a prop, although I'd like to add the class argument to it in order to style it.

import styles from "./css/MyElement.module.css";

interface Props {
  src: JSX.Element;
}

export default function MyElement(props: Props) {
  return (
      <div class={styles.wrapper}>
          {props.src} // props.src.addAttribute("class", {styles.my_class}) or smt would be nice, or anything that achieves the same result too
      </div>
    );
}

import styles from "./css/MyElement.module.css";

interface Props {
  src: JSX.Element;
}

export default function MyElement(props: Props) {
  return (
      <div class={styles.wrapper}>
          {props.src} // props.src.addAttribute("class", {styles.my_class}) or smt would be nice, or anything that achieves the same result too
      </div>
    );
}

5 Replies

KyrosOP•2y ago

update: I was able to get it to work by passing a function definition that accepted a css_class argument and then calling that inside the component, although i find this approach quite tedious and id really appreciate a better solution...

// Parent.tsx
import { MyComponent, ComponentImPassing } from "./components";


export default function ParentComponent() {
  return (
    <div>
        <MyComponent path="/" src={function (css_class: string) { return <ComponentImPassing class={css_class}></ComponentImPassing> }} />
    </div>
  )
}

// MyComponent.tsx
import styles from "./css/MyElement.module.css";
import { JSX } from "solid-js";

interface Props {
  src: (arg0: string) => JSX.Element;
}

export default function MyElement(props: Props) {
  return (
      <div class={styles.wrapper}>
          {props.src(styles.svg)}
      </div>
    );
}

// Parent.tsx
import { MyComponent, ComponentImPassing } from "./components";


export default function ParentComponent() {
  return (
    <div>
        <MyComponent path="/" src={function (css_class: string) { return <ComponentImPassing class={css_class}></ComponentImPassing> }} />
    </div>
  )
}

// MyComponent.tsx
import styles from "./css/MyElement.module.css";
import { JSX } from "solid-js";

interface Props {
  src: (arg0: string) => JSX.Element;
}

export default function MyElement(props: Props) {
  return (
      <div class={styles.wrapper}>
          {props.src(styles.svg)}
      </div>
    );
}

belst•2y ago

you can use <Dynamic> for this

KyrosOP•2y ago

what is it?

belst•2y ago

https://docs.solidjs.com/references/api-reference/control-flow/Dynamic

KyrosOP•2y ago

ty oh exactly what i needed, ty

Gaming

Programming

Add props to an element programmatically