styled-jsx 动态样式没有被应用到元素上

Question

背景:
在App里的GridPreview接受"长宽", 使用for循环渲染一系列子元素GridTile

问题:
GridTile组件内的样式没有被应用
vscode 0 error , 0 warning. webpack编译通过. 浏览器 0 error.

预期:
GridTile组件内的样式正常渲染

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: strech;
          align-self: strech;
          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"));

附上浏览器截图

如图所示, 元素上没有样式

Answer 1

这似乎是styled-jsx本身的问题, 不能接受复杂的表达式

参考: https://github.com/zeit/style...

像这样把background-color的值提出来, 就行了

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 applied */}
      <style jsx>{`
        .tile {
          background-color: ${color};
          justify-self: stretch;
          align-self: stretch;
          grid-column: ${indexOfH + 1};
          grid-row: ${indexOfW + 1};
        }
      `}</style>
      {/* style not applied */}
      {/* <style jsx>{`
        .tile {
          background-color: rgb(
            ${Math.random() * 100},
            ${Math.random() * 100},
            ${Math.random() * 100}
          );
          justify-self: stretch;
          align-self: stretch;
          grid-column: ${indexOfH + 1};
          grid-row: ${indexOfW + 1};
        }
      `}</style> */}
    </div>
  );
}