In one of my React components, I have the following definition for some custom elements:
declare global {
// eslint-disable-next-line @typescript-eslint/no-namespace
namespace JSX {
interface IntrinsicElements {
'd3fc-group': DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
'd3fc-svg': DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
}
}
}
and I return as:
return (
<div ref={d3Container} className='main_layout' data-testid={'chart'}>
<d3fc-group
id='group'
className='hellooo'
style={{ display: 'flex', height: '100%', width: '100%', flexDirection: 'column' }}
auto-resize>
</d3fc-group>
</div>
);
But in the resulting html, "className" is converted to "classname" not "class" attribute.
<d3fc-group id="group" classname="hellooo" auto-resize="true" style="display: flex; height: 100%; width: 100%; flex-direction: column;"><div style="flex: 1 1 0%; display: flex; flex-direction: column;"></d3fc-group>
How to make it converted to "class" attribute like other components?