styled-jsx Dynami c стили не применяются

Question

фон:

GridPreview в App принимает «длину и ширину», которые используются для отображения подэлементов GridTile в for loop

что не так

Стиль внутри компонента GridTile не применяется.

vscode 0 error, 0 warning. Webpack успешно скомпилирован. Ошибка консоли браузера 0.

import React, { useState, useEffect, useCallback } from "react";
import ReactDOM from "react-dom";

function App() {
  const [gridW, setGridW] = useState<number>(5);
  const [gridH, setGridH] = useState<number>(5);
  const setGrid = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    const current = e.currentTarget;
    switch (current.className) {
      case "setGridW": {
        setGridW(parseInt(current.value));
        break;
      }
      case "setGridH": {
        setGridH(parseInt(current.value));
        break;
      }
    }
  }, []);
  useEffect(() => {}, [gridW, gridH]);
  return (
    <>
      <div className="gridSizeSetting">
        <label htmlFor="">
          width
          <input
            type="range"
            min="1"
            max="24"
            step="1"
            value={gridW}
            className="setGridW"
            onChange={setGrid}
            name=""
            id=""
          />
        </label>
        <span>X</span>
        <label htmlFor="">
          height
          <input
            type="range"
            min="1"
            max="24"
            step="1"
            value={gridH}
            className="setGridH"
            onChange={setGrid}
            name=""
            id=""
          />
        </label>
      </div>
      <GridPreview w={gridW} h={gridH}></GridPreview>
    </>
  );
}

function GridTile({
  indexOfW,
  indexOfH,
}: {
  indexOfW: number;
  indexOfH: number;
}) {
  return (
    <div className={`tile ${indexOfW}-${indexOfH}`}>
      {`${indexOfW}-${indexOfH}`}
      <style jsx>{`
        div {
          background-color: rgb(
            ${Math.random() * 100 + 100},
            ${Math.random() * 100 + 100},
            ${Math.random() * 100 + 100}
          );
          justify-self: stretch;
          align-self: stretch;
          grid-column: ${indexOfH + 1};
          grid-row: ${indexOfW + 1};
        }
      `}</style>
    </div>
  );
}

function GridPreview({ w, h }: { w: number; h: number }) {
  const tiles: Array<JSX.Element> = [];
  for (let indexOfW = 0; indexOfW < w; indexOfW++) {
    for (let indexOfH = 0; indexOfH < h; indexOfH++) {
      tiles.push(
        <GridTile
          key={`${indexOfW},${indexOfH}`}
          indexOfH={indexOfH}
          indexOfW={indexOfW}
        ></GridTile>
      );
    }
  }
  return (
    <div className="container">
      {tiles}
      <style jsx>{`
        .container {
          height: 800px;
          display: grid;
          grid-template-rows: repeat(${w}, 1fr);
          grid-template-columns: repeat(${h}, 1fr);
        }
      `}</style>
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector("#root"));

снимок экрана браузера

снимок экрана инструмента react dev

Answer 1

Кажется, что styled-jsx может принимать только простую строку или выражение.

См.: https://github.com/zeit/styled-jsx/issues/595

function GridTile({
  indexOfW,
  indexOfH,
}: {
  indexOfW: number;
  indexOfH: number;
}) {
  const color = `rgb(
  ${Math.random() * 100 + 100},
  ${Math.random() * 100 + 100},
  ${Math.random() * 100 + 100}
)`;
  return (
    <div className={`tile ${indexOfW}-${indexOfH}`}>
      {`${indexOfW}-${indexOfH}`}
      <style jsx>{`
        .tile {
          background-color: ${color};
          justify-self: stretch;
          align-self: stretch;
          grid-column: ${indexOfH + 1};
          grid-row: ${indexOfW + 1};
        }
      `}</style>
    </div>
  );
}

Перемещение background-color из <style jsx> работает.

Answer 2

Стиль внутри компонента GridTile не применяется.

vscode 0 error, 0 warning. Webpack успешно скомпилирован. Ошибка консоли браузера 0.

Answer 3

Я не знаю, как использовать <style jsx>, но вместо этого вы можете использовать встроенные стили, примерно так:

let container = {
 height: '800px',
 display: 'grid',
 gridTemplateRows: `repeat(${w}, 1fr)`,
 gridTemplateColumns: `repeat(${h}, 1fr)`
}
      
 return (
    <div style={container}>
      {tiles}

    </div>
  );

EDIT:

После анализа кода я думаю, что это проблема:

background-color: rgb(
            ${Math.random() * 100 + 100}px,
            ${Math.random() * 100 + 100}px,
            ${Math.random() * 100 + 100}px
          );

Вы указываете значения rgb () в пикселях.