Most RFUI components do something like this:
export const MyComponent = ({ ...rest }) => {
const className = "something";
const { class: restClass, ...restWithoutClass } = rest;
if (restClass) {
className += ` ${restClass}`;
}
return (
<div class={className} {...restWithoutClass}>
{children}
</div>
);
}
So then, if you do:
<MyComponent>
Example
</MyComponent>
You'll get:
<div class="something">
Example
</div>
But if you do:
<MyComponent class="text-neutral-700">
Example
</MyComponent>
You'll get:
<div class="something text-neutral-700">
Example
</div>
This is because of the following block in MyComponent
:
if (restClass) {
className += ` ${restClass}`;
}
Relatedly, if you do:
<MyComponent title="example">
Example
</MyComponent>
You'll get:
<div class="something" title="example">
Example
</div>
This is because of the {...restWithoutClass}
in MyComponent
. See MDN's docs for rest parameters if you are unfamiliar.