class keyword is not working properly, but className is in React-Grid-Layout.

Hello,

I do like the naming of class in Preact instead of className in React.

On using react-grid-layout below, it seems that class keyword in tag affects properly in react-grid-layout. But, className keyword does not… https://github.com/STRML/react-grid-layout

I set the value of layout in graphContainer.css. class keyword is not applied…

import { h, Component } from 'preact';
import style from './graphContainer.css';
import GridLayout from 'react-grid-layout';

class GraphContainer extends Component{
  render() {
    return (
      <GridLayout className="layout" cols={12} rowHeight={30} width={1200}>
        <div key="a" data-grid={{x: 0, y: 0, w: 1, h: 2, static: true}}>a</div>
        <div key="b" data-grid={{x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4}}>b</div>
        <div key="c" data-grid={{x: 4, y: 0, w: 1, h: 2}}>c</div>
      </GridLayout>
    )
  }
}

Do I have to use className out of preact?

[kidqueb]

If you’re using css modules it may be that the styles just aren’t being referenced.

import style from './graphContainer.css';

...

<GridLayout class={style.layout} cols={12} rowHeight={30} width={1200}>

The difference being class={style.layout} instead of className="layout"

[developit]

You need to pass the name that the library expects - preact doesn’t normalize between the names except when applying props to DOM elements.

If GridLayout expects to be passed className="x", you have to pass it that way.

You might find Preact Compat addresses this - it installs className as an alias of class.