[📖] How to author components that accept style, what name should be used instead of className?

[Nefcanto]

Suggestion

In Qwik, className is deprecated and we are encouraged to use class.

This is great news.

But when we want to create a component:

const Card = ({ class }) => {
   return <div class={class}>I am a card</div>
}

Then the code does not compile.

We can easily change the name to style:

const Card = ({ style }) => {

But this means that our code is not consistent anymore. In some places, we apply styles using class and in some places, we apply styles using any other name that we have given to our parameters.

What is the solution here? How can we be consistent across a Vite JSX project to apply styles? Please specify your solution in the documentation.

---

This is a minimal reproducible example. Steps to reproduce:

• Clone
• npm install
• npm run dev
• Now you should see the QWIK WARN jsx: className is deprecated. Use class instead. warning
• If you rename all of the className instances to class that warning goes away.
• But now, how should we define the src/components/message.tsx component and take the class parameters?
• In src/components/message.tsx if you uncomment the class parameter, then the code won't compile

[zanettin]

Hi @Nefcanto
Thanks for creating this issue 🙏
The problem is not qwik related but a general JS "issue". Reserved keywords like class, const, let, var, etc. are not allowed to be used as variables.

here a short example:

function test(class) {
 console.log(class);
}

test('foo');

so my suggestion would be what @jordanw66 already wrote or add an alias on the destructuring like this:

export const Child = ({ class: _class }) => {
  return <span class={_class}>child content</span>;
};

export default component$(() => {
  return (
    <div>
      <h1>props test</h1>
      <Child class="big red" />
    </div>
  );
});