Стиль пропреты в JSX reactjs

Question

Я пытаюсь реализовать на reactjs, называемом Gallery, который выглядит следующим образом на html:

<div class="grid-gallery" style="--grid-desktop:4; --grid-tablet:4; --grid-phone:4; 
    --grid-gap:var(--space-base); --grid-list-desktop:5; --grid-list-tablet:5; --grid-list-phone:5;">
    <div data-container="" class="column-item-preview">1</div>
    <div data-container="" class="column-item-preview">2</div>
    <div data-container="" class="column-item-preview">3</div>
    <div data-container="" class="column-item-preview">4</div>
    <div data-container="" class="column-item-preview">5</div>
    <div data-container="" class="column-item-preview">6</div>
    <div data-container="" class="column-item-preview">7</div>
    <div data-container="" class="column-item-preview">8</div>
</div>

И некоторые изменения применяются к номерам классов css в стилях. Когда я помещаю это в возвращаемую функцию компонента, она не работает из-за параметра стиля.

Как я могу "перевести" это в JSX?

Answer 1

 <div className="grid-gallery" style={{-gridDesktop: 4, -gridTablet: 4, -gridPhone: 4, -gridGap: 'var(--space-base)', -gridListDesktop: 5, -gridListTablet: 5, -gridListPhone: 5}}>
        <div data-container className="column-item-preview">1</div>
        <div data-container className="column-item-preview">2</div>
        <div data-container className="column-item-preview">3</div>
        <div data-container className="column-item-preview">4</div>
        <div data-container className="column-item-preview">5</div>
        <div data-container className="column-item-preview">6</div>
        <div data-container className="column-item-preview">7</div>
        <div data-container className="column-item-preview">8</div>
      </div>

Используйте этот синтаксис.

Answer 2

    <div class="grid-gallery" style="--grid-desktop:4; --grid-tablet:4; --grid-phone:4; 
    --grid-gap:var(--space-base); --grid-list-desktop:5; --grid-list-tablet:5; --grid-list-phone:5;">
    <div data-container="" className="column-item-preview">1</div>
    <div data-container="" className="column-item-preview">2</div>
    <div data-container="" className="column-item-preview">3</div>
    <div data-container="" className="column-item-preview">4</div>
    <div data-container="" className="column-item-preview">5</div>
    <div data-container="" className="column-item-preview">6</div>
    <div data-container="" className="column-item-preview">7</div>
    <div data-container="" className="column-item-preview">8</div>
</div>

Это должно сделать работу

Answer 3

Используйте className вместо класса. Итак, ваш код будет выглядеть так: